Question

以下是完整的代码，我无法进行饼图聊天的第二级深入分析。

如何添加多级钻取系列？第一次聊天我有2个数据部分（已完成和失败），第二个聊天数据将是动态的，具体取决于第一个饼图的选择。第三级聊天同样的事情。

var chartSeriesData = [];
   var chartSeriesData1 =[];

   var chartDrilldownData = [];

 chartSeriesData = [{
        name: "Completed",
        y: 1,
        color: "#1068C7",
        drilldown: "Completed"
    }, {
        name: "Fail",
        y: 2,
        color: "#11A852",
        drilldown: "Fail"
    }];
    chartSeriesData1 = [{

        id: "Completed",

       data: [{
                name: 'CEVA',
                  y: 15,
                  drilldown: 'CEVA-COMPLETED'
                },{
                    name: 'SYNCHRON',
                  y: 13,
                  drilldown: 'SYNCHRON-COMPLETED'
                },{
                        name: 'GENCO',
                        y: 23,
                                 drilldown: 'GENCO-COMPLETED'
                                  }],




    }, {
            id:"Fail",
        data: [{
                 name: 'CEVA',
                                  y: 45,
                                  drilldown: 'CEVA-FAIL'
                                },{
                                    name: 'SYNCHRON',
                                  y: 23,
                                  drilldown: 'SYNCHRON-FAIL'
                                },{
                                        name: 'GENCO',
                                        y: 23,
                                                 drilldown: 'GENCO-FAIL'
                                                  }],

    }];
    chartDrilldownData = [
    {
        id:"CEVA-COMPLETED",
        data: [{
                    name: 'BFC',
                  y: 19

                },{
                    name: 'BMC',
                  y: 23
                }],
       },
       {
        id:"SYNCHRON-COMPLETED",
        data: [{
                    name: 'qwsh',
                  y: 1

                },{
                    name: 'adwa',
                  y: 1
                }],
        },
      {
        id:"GENCO-COMPLETED",
        data: [{
                    name: 'qwsh',
                  y: 1

                },{
                    name: 'adwa',
                  y: 1
                }],

       } ,
       { id:"CEVA-FAIL",
               data: [{
                        name: 'BFC',
                         y: 19

                       },{
                        name: 'BMC',
                         y: 23
                       }],
              },
              {
               id:"SYNCHRON-FAIL",
               data: [{
                        name: 'qwsh',
                         y: 1

                       },{
                        name: 'adwa',
                         y: 1
                       }],
            },
             {
               id:"GENCO-FAIL",
               data: [{
                        name: 'qwsh',
                         y: 1

                       },{
                        name: 'adwa',
                         y: 1
                       }],

              }
    ];

    console.log('----------------');
    console.log(chartSeriesData);

    console.log('----------------');
    console.log(chartSeriesData1);

    console.log('----------------');
    console.log(chartDrilldownData);
    console.log('-------------------');


// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },

    title: {
        text: 'Browser market shares. January, 2018'
    },
    subtitle: {
        text: 'Click the slices to view versions. Source: <a href="http://statcounter.com" target="_blank">statcounter.com</a>'
    },
    plotOptions: {
        series: {
        allowPointSelect: true,

            point: {

                events: {
                   select: function () {
                    var drilldown = this.drilldown;
                    console.log('drilldown'+drilldown);



                    //  alert(this.options);
                      //console.log(this.options)
                      console.log(this.series.data);
                    }
                  }
             },
            dataLabels: {
                enabled: true,
                format: '{point.name}: {point.y:.1f}%'
            },
             drilldown:true
        }
    },

    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
    },

       series: [{
            name: 'Status',
            colorByPoint: true,
            data: chartSeriesData
        }],
        drilldown:{
            series: chartSeriesData1




        }   

    });

Answer 1

您创建了chartDrilldownData但从未在图表参数中使用它，因此第二个级别从不会在点击时触发。

只需删除此代码：

];
chartDrilldownData = [

工作Fiddle

Pie chat动态下钻（3个级别）使用highchatjs

1 个答案: