如何强制Highcharts在xAxis上显示最后一个标签?

时间:2014-10-20 13:39:01

标签: javascript highcharts axis

似乎在一个阶梯式的xaxis中,正常的" showLastLabel" 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"
                        }]
            });

});

感谢任何提示!

3 个答案:

答案 0 :(得分:3)

http://jsfiddle.net/grg4b6xk/5/ 这是我能找到的最佳方式:

   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);
            }
         }
    }

添加load事件处理程序。在此事件处理程序中,取轴x的刻度(axes[0]为x,axes[1]为y)。 ticks是一个类似于数组的对象,因此您需要将其映射到数组以通过索引访问它。该数组中的最后一项是位置-1的一些刻度,因此真正的最后一个刻度位于它之前的位置(因此它是length - 2)。然后调用render函数传递一个除以10的数字。我用了0.所以勾在最后一个位置重新渲染。

答案 1 :(得分:0)

如果您知道您希望数据在2011年结束,请添加该类别:

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']

然后强制xAxis显示该标签:

min: 0,
max: 50

并演示:http://jsfiddle.net/grg4b6xk/6/

答案 2 :(得分:0)

Highcharts接受null值,因此在您的情况下,我将null2011附加到各自的数组中。我会告诉你'代码',但这就是我所做的一切,并且考虑到关键值是JSON代码......我猜你有它。 Here's a fork of your fiddle functioning as you desired