在图例中为第二次和第三次向下钻取创建新值

Question

我已经创建了图表 3 级向下钻取，并希望用颜色显示第 3 级的图例。

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked bar chart'
    },
    xAxis: {
      labels: {
        rotation: -45,
        align: "right",
        y: 30,
      },
      type: "category",
      tickWidth: 0
    },
    yAxis: {
        title: {
            text: 'Total fruit consumption'
        }
    },
    legend: {
      enabled: true,
      itemStyle: {
        fontSize:'10px'
      },
      align: 'right',
      verticalAlign: 'middle',
      layout: 'vertical',
      reversed:true

    },
    plotOptions: {
       
      series: {
        cropThreshold: 1000,
        animation: {
          duration: 300
        },
        cursor: 'pointer',
        point: {
          events: {
            click: function () {
              if(this.id)
              {
                alert(this.id);
              }
            }
          }
        }
      },
      column: {
        cropThreshold: 1000,
        minPointLength: 3,
        animation: false,
        stacking: 'normal'
      }
    },
    series: [{
              index: 0,
              name: 'Tippers',
              turboThreshold: 0,
              cropThreshold: Infinity,
              data: [{
                        name:'01-Feb-2018',
                        colorByPoint:true,
                        y:3,
                        drilldown:'Tippers-1-2-2018'
                      }]
            }],
     drilldown: {
       activeAxisLabelStyle: {
                textDecoration: 'none',
                color: 'black',
                fontWeight: 'normal'
              },
              series: [{
                          name: '01-Feb-2018',
                          id: 'Tippers-1-2-2018',
                          turboThreshold: 0,
                          cropThreshold: Infinity,
                          showInLegend: false,
                          data: [ {
                                    name: 'psb04221',
                                    y: 1,
                                    drilldown:'psb04221/Tippers-1-2-2018'
                                    },{
                                    name: 'rvd910939',
                                    y: 2,
                                    drilldown:'rvd910939/Tippers-1-2-2018'
                                    },]
                      },{
                          name: '01-Feb-2018',
                          id: 'Trucks-1-2-2018',
                          turboThreshold: 0,
                          cropThreshold: Infinity,
                          showInLegend: false,
                          data: [ {
                                    name: 'rvd910939',
                                    y: 2,
                                    drilldown:'rvd910939/Trucks-1-2-2018'
                                    },{
                                    name: 'sks913031',
                                    y: 1,
                                    drilldown:'sks913031/Trucks-1-2-2018'
                                    },]
                      },{
                          name: 'psb04221 / Tippers 1-February-2018',
                          id: 'psb04221/Tippers-1-2-2018',
                          turboThreshold: 0,
                          cropThreshold: Infinity,
                          showInLegend: false,
                          data: [ {
                            name: '01-February-2018-44',
                            id: '44',
                            y: 1,
                            type_legend: 'green',
                            color:'green'
                         
                          },]
                        },{
                          name: 'rvd910939 / Tippers 1-February-2018',
                          id: 'rvd910939/Tippers-1-2-2018',
                          turboThreshold: 0,
                          cropThreshold: Infinity,
                          showInLegend: false,
                          data: [ {
                            name: '01-February-2018-21',
                            id: '21',
                            y: 1,
                            type_legend: 'green',
              color:'green'
                          },{
                            name: '01-February-2018-25',
                            id: '25',
                            y: 1,
                            type_legend: 'yellow',
                            color:'yellow'
                          },{
                            name: '01-February-2018-27',
                            id: '27',
                            y: 1,
                            type_legend: 'green',
              color:'green'
                         
                          },]
                        },{
                          name: 'rvd910939 / Trucks 1-February-2018',
                          id: 'rvd910939/Trucks-1-2-2018',
                          turboThreshold: 0,
                          cropThreshold: Infinity,
                          showInLegend: false,
                          data: [ {
                            name: '01-February-2018-13',
                            id: '13',
                            y: 1,
                            type_legend: 'red',
                            color:'red'
                          },{
                            name: '01-February-2018-26',
                            id: '26',
                            y: 1,
                            type_legend: 'green',
                            color:'green'
                          },]
                        },{
                          name: 'sks913031 / Trucks 1-February-2018',
                          id: 'sks913031/Trucks-1-2-2018',
                          turboThreshold: 0,
                          cropThreshold: Infinity,
                          showInLegend: false,
                          data: [ {
                            name: '01-February-2018-22',
                            id: '22',
                            y: 1,
                            type_legend: 'yellow',
                            color:'yellow'
                          },{
                            name: '01-February-2018-23',
                            id: '23',
                            y: 1,
                            type_legend: 'green',
                            color:'green'
                          },]
                        }]
       }
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

第一个向下钻取图例显示日期正确

我想向图例用户显示第二次深入分析

第三次深入分析我想显示滤色器的图例

请帮我添加图例，以便按第 3 次深入分析的颜色红色、绿色和蓝色显示图例过滤器，如下图所示：3rd Drilldown

Answer 1

我已经通过 ppotaczek 的回答解决了问题。

在您的示例中，第三级向下钻取是一个系列，这就是图例仅显示一项的原因。如果您想在向下钻取中有多个图例项，则必须有多个系列。您可以使用向下钻取事件和 addSeriesAsDrilldown 方法，如下例所示，以获得所需的结果。

现场演示：http://jsfiddle.net/BlackLabel/amg8234t/

API参考：

https://api.highcharts.com/class-reference/Highcharts.Chart#addSeriesAsDrilldown

https://api.highcharts.com/highcharts/chart.events.drilldown

此致！

非常感谢。

在图例中为第二次和第三次向下钻取创建新值

Create new value in legend for 2nd and 3rd drilldown

legend

highcharts

drilldown