2014-10-20 229 views
2

看來,在一個階梯xaxis正常的「showLastLabel」doesn't work。就我而言,我只是每十年展示一次;但如果我想在任何情況下看到最新的一年,這是行不通的。 Here is a fiddle如何強制Highcharts在xAxis上顯示最後一個標籤?

$(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" 
         }] 
      }); 

}); 

感謝您的任何提示!

+0

您沒有2011年的數據。如果您添加2011年的數據,它將顯示標籤。 – Dmitry 2014-10-20 14:09:30

+0

但我希望它顯示2010年的xaxis標籤,因爲這是最後一年。 – luftikus143 2014-10-20 14:29:16

回答

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.因此,tick會在最後一個位置上重新顯示。

+0

謝謝,是的,這很好。但是,這僅適用於類別寫入xAxis項目時的情況,如小提琴中的。在我的情況下,我有從CSV文件加載數據([這裏是小提琴](http://jsfiddle.net/luftikus143/yhh2ca65/1/),但它不起作用,因爲它從一個CSV文件加載CSV外部服務器,這是不允許的)。在我的情況下,它只是寫出xaxis項目的最後一個「計數」,這是50年可用的「50」。你有什麼想法如何訪問「真正的」xaxis值? – luftikus143 2014-10-22 09:23:42

+0

@ luftikus143如果該文件是靜態的,並且2011年是可以添加'labels:{formatter:function(){if(this.isLast){this.value ='2011'; } return this.value; }}'到'xAxis:'對象中。 [小提琴](http://jsfiddle.net/yhh2ca65/2/) – Dmitry 2014-10-22 16:24:16

+0

謝謝,但不,它不是靜態的。我有幾百個不同的變量正在繪製,而去年在許多情況下是不同的。 – luftikus143 2014-10-23 09:17:48

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/