在图例中为第 2 次和第 3 次钻取创建新值答案

【问题标题】：Create new value in legend for 2nd and 3rd drilldown在图例中为第 2 次和第 3 次钻取创建新值
【发布时间】：2018-09-05 12:40:04
【问题描述】：

我已经创建了图表 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>

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

我想显示传奇用户的第二次深入分析

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

请帮助我为显示图例过滤器添加图例，按第三次钻取的红色、绿色和蓝色，如下图所示：3rd Drilldown

【问题讨论】：

请点击链接获取 jfiddle jsfiddle.net/0zr6ok59/22
更新下钻系列showInLegend: true,查看演示jsfiddle.net/bhoae30t
@Deep 3015，我的问题不正确，我只想按红色、蓝色和绿色进行过滤
我想要像这张图片一样的第三次深入展示图例。 i.stack.imgur.com/p3sN8.jpg
我看到你也在 Highcharts 论坛上发布了这个主题：forum.highcharts.com/highcharts-usage/…让讨论继续在那里。

标签： highcharts legend drilldown

【解决方案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

最好的问候！

非常感谢。

【讨论】：