带有向下钻取的动态高图饼图

Question

我正在根据存储在div数据属性中的数组创建我的图表。馅饼显示，但我似乎无法创建向下钻取。我的数据阵列由JS创建，它看起来是这样的：

[ 
Object {name="Drive", y=1, color="#1068C7", drilldown="drive"}, 
Object { name="Ride", y=2, color="#11A852", drilldown="ride"}, 
Object { name="Swim", y=1, color="#23ED1C", drilldown="swim"} 
] 

我的建议下钻阵列输出该上的console.log（）

[ 
Object { name="Tiger Team", data=1, id="swim"}, 
Object { name="Tiger Team", data=1, id="drive"}, 
Object { name="Spider Team", data=1, id="ride"}, 
Object { name="Bird Team", data=1, id="ride"} 
] 

我需要做的就是点击“骑“并得到钻在这个categrory所有用户的下降，这将是Object { name="Spider Team", data=1, id="ride"},和Object { name="Bird Team", data=1, id="ride"}

我的图表初始化脚本看起来是这样的： draw_chart（chart_div）;

var chart = $("#"+chart_div).highcharts(); 
     chart.addSeries({ 
      type: 'pie', 
      name: "Num of results", 
      data: pie_json 
     }); 

我该如何关联这两个数组，并让一个钻取到另一个？

Answer 1

您需要导入向下钻取js以及您的json样本数据不正确。

1. 所有的钻系列数据，其ID和主数据的id是应match.a

2. 还钻到系列数据应该在一起像这里骑数据应该给作为数据。

     var brandsData = [], 
           drilldownSeries = []; 
   
   
         brandsData = [{ 
           name: "Drive", 
           y: 1, 
           color: "#1068C7", 
           drilldown: "drive" 
          }, { 
           name: "Ride", 
           y: 2, 
           color: "#11A852", 
           drilldown: "ride" 
          }, { 
           name: "Swim", 
           y: 1, 
           color: "#23ED1C", 
           drilldown: "swim" 
          }]; 
         drilldownSeries = [ 
          { 
           "name": "dfdf", 
           "data": [ 
            ["Tiger Team", 10] 
           ], 
           id: "swim" 
          }, { 
           "data": [ 
            ["Tiger Team", 10] 
           ], 
           id: "drive" 
          }, { 
           "data": [ 
            ["Spider Team", 3], 
            ["Bird Team", 1] 
           ], 
           id: "ride" 
          }]; 
         // Create the chart 
         $('#container').highcharts({ 
          chart: { 
           type: 'pie' 
          }, 
          series: [{ 
            name: "Team", 
            colorByPoint: true, 
            data: brandsData 
           }], 
          drilldown: { 
           series: drilldownSeries 
          } 
         }); 
   

pie chart drilldown fiddle