具有向下钻取功能的动态 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 示例数据不正确。

所有id和主数据id应该match.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 饼图

Dynamic highcharts pie chart with drilldown

jquery

highcharts