How to force Highcharts to show last label on xAxi

问题:

It seems that in a stepped xaxis the normal "showLastLabel" doesn't work. In my case, I am displaying every tenth year only; but if I want to see in any case the latest year, it doesn't work. Here is a fiddle.

$(function () {
var chart = new Highcharts.Chart(
            {
                chart:
                {
                    renderTo: "container",
                    type: "line"
                },
                title: 
                {
                    text: "Emissions of CO2 - from Fossil Fuels - Total (CDIAC)"
                },
                xAxis: 
                {
                    categories: ['1961','1962','1963','1964','1965','1966','1967','1968','1969','1970','1971','1972','1973','1974','1975','1976','1977','1978','1979','1980','1981','1982','1983','1984','1985','1986','1987','1988','1989','1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010'], 
                    labels:
                    {
                        step: 10
                    },
                    showLastLabel: true,
                    endOnTick: true
                },
                yAxis: 
                {
                    min: 0
                },
                series: 
                [   {
                            data: [836290,884698,947139,970623,961804,953139,937905,986489,1053841,1027857,1039329,1043832,1088357,1065419,1005220,1094115,1055965,1082764,1121897,1104068,1052479,1019684,1015786,1037513,1048350,1051961,1036999,1033773,1017926,1014450,930734,892705,878363,866267,864817,890342,862982,856064,823133,830657,854361,829449,834088,826572,807363,809521,784657,784000,732848,745994],
                            name: "Germany"
                        }]
            });

});

Thanks for any hints!

回答1:

http://jsfiddle.net/grg4b6xk/5/ This is the best way I could find:

   chart:
   {
        renderTo: "container",
        type: "line",
        events:{
             load:function(){
                 var ticks = $.map(this.axes[0].ticks, function(t){return t;});
                   ticks[ticks.length-2].render(0);
            }
         }
    }

Add load event handler. In this event handler take ticks of axes x (axes[0] is x and axes[1] is y). ticks is an array-like object so you need to map it to an array to access it by index. The last item in that array is some tick with position -1 so the real last tick is in position before it (so it is length - 2). Then call the render function passing a number that divides by 10. I used 0. So the tick rerenders on the last position.

回答2:

If you know you want data to end on 2011, then add that category:

categories: ['1961', '1962', '1963', '1964', '1965', '1966', '1967', '1968', '1969', '1970', '1971', '1972', '1973', '1974', '1975', '1976', '1977', '1978', '1979', '1980', '1981', '1982', '1983', '1984', '1985', '1986', '1987', '1988', '1989', '1990', '1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011']

Then force xAxis to display that label:

min: 0,
max: 50

And demo: http://jsfiddle.net/grg4b6xk/6/

回答3:

Highcharts accepts null values, so in your case, I appended null and 2011 to their respective arrays. I'd show you the 'code' but that is literally all I did, and considering the key values are JSON code...I guess there you have it. Here's a fork of your fiddle functioning as you desired.