具有向下钻取功能的动态 highcharts 饼图

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"}
]

我需要做的是点击“Ride”并深入了解该类别中的所有用户，即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

您需要导入drilldown js，并且您的json示例数据不正确。

1. id 和主数据的 id 应该匹配的所有下钻系列数据。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