HighCharts：向下钻取动态数据

Question

我需要生成具有向下钻取功能的交互式图表。我遇到了HighCharts，它非常好，很酷，但数据似乎是静态的。有什么办法可以在HighChart中动态数据和动态数据下钻。

data = [{ 
        y: 55.11, 
        color: colors[0], 
        drilldown: { 
         name: null, 
         categories: null, 
         data: null, 
         color: colors[0] 
        } 
       }, { 
        y: 21.63, 
        color: colors[1], 
        drilldown: { 
         name: 'Firefox versions', 
         categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'], 
         data: [0.20, 0.83, 1.58, 13.12, 5.43], 
         color: colors[1] 
        } 
       }]; 

其中y的值被赋予静态值。我需要它是动态的，并为每个值分配一个明细。它可以在HighCharts中完成，还是有其他工具可以使用？

Answer 1

这里是东西，你可以作为一个起点使用：

var level = 0; 
var refreshChart = function(){ 
    new Highcharts.Chart({ 
     chart: { 
      renderTo: 'chart' 
     }, 

     xAxis: { 
      categories: getXAxisValues() 
     }, 

     series: [ 
        { 
         data: getSeries1() 
        }, 
        { 
         data: getSeries2() 
        } 
      ], 

     plotOptions: { 
      series: { 
       point: { 
        events: { 
         click: function() { 
          level = 1; 
          refreshChart(); 
         } 
        } 
       } 
      } 
     } 
    }); 
}; 

var getSeries1 = function(){ 
    if(level == 0) 
     // returns series data as described in highcharts documentation 
    else 
     // return some other data 
} 

// similar to getXAxisValues() if you have it and for getSeries2 if you have another serie