Highchart，類別和系列數據的不同數量

我有一個圖表，顯示1995年和2030年之間的目標。我需要該系列在當年「停止」。Highchart，類別和系列數據的不同數量

x軸：

xAxis: { 
      categories: ['1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2015', '2016', '2017','2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025', '2026', '2027' , '2028', '2029', '2030'], 
      tickmarkPlacement: 'on', 
      title: { 
       enabled: false 
      } 
     },

該系列：

series: [{ 
      name: 'Consumption', 
      data: [5020, 4350, 3090, 2500, 2100, 800] 
     }],

如果我喜歡這個，這些類別被自動匹配序列數據的數量。

有沒有我可以保留所有類別的選項？

http://jsfiddle.net/zh4yukL8/1/

來源

2015-10-19 Per

用0填充數據？ –

最簡單的方法是在你的series.data文件中將沒有數據的年份設置爲null。像'data：[5020，4350，3090，2500，2100，null，null，...，null]' – wergeld

或者將'xAxis.max'設置爲32：http://jsfiddle.net/zh4yukL8/2 /甚至更好，所以你不必手動計算類別長度：http://jsfiddle.net/zh4yukL8/3/ –

有多種方法可以做到這一點，但答案（2）可能是你的情況是最有用的。

1）使用空值的未知數據

如果你有一定的年丟失的數據（以及要間歇性地停止圖），你可以寫未知的數據作爲一系列數據的「空」（正如@wergeld在他的評論中提到的那樣）。

如果您以編程方式爲您的圖表填寫數據，並且您的程序依次處理每個類別，這很有用。如果您只有2000年的數據，那麼您的程序應該運行到您的結束年份（或任何其他最終類別），將空值放入沒有可用數據的系列中。

2）使用pointStart &最大有日期時間圖表

看到，因爲你正在處理多年，你可以在你的顯示這個系列的圖表更有效。您可以選擇開始年份（pointStart）和結束年份（max）;數據從開始的一年開始，系列一直持續到結束的一年。

你的X軸將變更爲：

xAxis: { 
    type: 'datetime', 
    max: Date.UTC(2030, 0, 1) 
}

你還需要一些plotOptions *：

plotOptions: { 
    series: { 
     pointStart: Date.UTC(1995, 0, 1), 
     pointIntervalUnit: 'year' 
    } 
}

這裏舉例：http://jsfiddle.net/zh4yukL8/5/。

如果你有幾年的數據缺失，你可以用方法（1）解釋的系列數據中的空值填充這些數據，但圖表會一直持續到最大年份。

*在使用本示例時，我發現您使用的AngularJS Highcharts庫（highcharts-ng）期望plotOptions與本地Highcharts JS的處理方式不同。因此，上面的示例與您的圖書館一起工作，但對於其他人，您需要在「選項」對象之外擁有plotOptions。

3）使用功能制定出你的序列的長度

如果圖表不只是處理年及/或你想要一個離散序列代表，您可以使用Max屬性xAxis和一個聰明的函數來計算出你有多少種類。我可以看到在Highcharts中包含此函數的最佳方式似乎是在圖表的加載事件中。

您需要調整您的圖表*選項，包括事件：

chart: { 
    events: { 
     load: function() {       
      var totalValues = this.xAxis[0].categories.length; 
      this.xAxis[0].setExtremes(0 , totalValues - 1); 
     } 
    } 
}

這裏舉例：http://jsfiddle.net/zh4yukL8/6/與方法

*（2），使用時的 '圖表' 選項用於AngularJS的highcharts-ng庫位於'選項'對象內。

來源

2015-10-20 16:43:23 MrDoughnut

Highchart，類別和系列數據的不同數量

回答

相關問題