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

我需要做的是点击“骑行”并深入了解此类别中的所有用户，即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示例数据也不正确。

所有下钻系列数据，其ID和主要数据的ID应匹配.a

也可以将钻取系列数据放在一起，就像这里的骑行数据应该作为数据一样。

            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

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

1 个答案: