在HighCharts中添加類別

Question

1. 如何添加一個新的類別與基本的柱狀圖中的數據在高圖中。 （sample fiddle和下面的代碼）添加其他類別說2013年後，並添加所有4系列數據與說50在那。

2. 將另一個系列添加到新添加的類別，其值爲60，但不應出現在以前的類別中。

3. 我想要動態地做圖表中的一些功能延伸後

---

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Monthly Average Rainfall' 
     }, 
     subtitle: { 
      text: 'Source: WorldClimate.com' 
     }, 
     xAxis: { 
      categories: [ 
       'Jan', 
       'Feb', 
       'Mar', 
       'Apr', 
       'May', 
       'Jun', 
       'Jul', 
       'Aug', 
       'Sep', 
       'Oct', 
       'Nov', 
       'Dec' 
      ] 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Rainfall (mm)' 
      } 
     }, 
     tooltip: { 
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
      pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
       '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', 
      footerFormat: '</table>', 
      shared: true, 
      useHTML: true 
     }, 
     plotOptions: { 
      column: { 
       pointPadding: 0.2, 
       borderWidth: 0 
      } 
     }, 
     series: [{ 
      name: 'Tokyo', 
      data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 

     }, { 
      name: 'New York', 
      data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3] 

     }, { 
      name: 'London', 
      data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2] 

     }, { 
      name: 'Berlin', 
      data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1] 

     }] 
    }); 
}); 

Answer 1

要添加新類別，您需要使用chart.xAxis[0].setCategories(array)，其中array包含所有類別–新舊不只新。

要添加新系列，請使用chart.addSeries(options)，而對於options，您應該有data: [ [categoryIndex, value] ] –這將爲特定類別添加一個點。

參考文獻：

• setCategories
• addSeries

Answer 2

請看看http://jsfiddle.net/VYDDH/

我確實在

xAxis: { 
    categories: [ 
     'Jan', 
     'Feb', 
     'Mar', 
     'Apr', 
     'May', 
     'Jun', 
     'Jul', 
     'Aug', 
     'Sep', 
     'Oct', 
     'Nov', 
     'Dec', 
     '2013' 
    ] 
}, 

變化

和

series: [{ 
     name: 'Tokyo', 
     data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,50] 
    }, { 
     name: 'New York', 
     data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3,50] 
    }, { 
     name: 'London', 
     data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2,50] 
    }, { 
     name: 'Berlin', 
     data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1,50] 
}] 

你想試試嗎？

Answer 3

1. 添加2013到xAxis.categories，再加入50到的每個series.data
2. 末尾添加一個新的系列f與[0, 0, ..., 60]爲data
3. 圖表已經是「動態的」給（叫$('#container').highcharts(options);繪製

Working fiddle