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

Posted 2023-02-16

【中文标题】在图例中为第 2 次和第 3 次钻取创建新值

【英文标题】：Create new value in legend for 2nd and 3rd drilldown

【发布时间】：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/…让讨论继续在那里。

【参考方案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

最好的问候！

非常感谢。