如何使用值数组在 Highcharts 饼图图例中获取数据名称而不是“切片”？答案

【问题标题】：How get data name in Highcharts pie chart legend instead of "Slice" using array of values?如何使用值数组在 Highcharts 饼图图例中获取数据名称而不是“切片”？
【发布时间】：2016-09-06 23:30:23
【问题描述】：

我正在 Highcharts 中创建一个带有图例的饼图。当我将系列指定为值数组（我的首选方法）时，图例会为每个值显示字符串“Slice”。如果我改为将系列指定为具有命名值的对象列表，我会正确看到数据名称。如果我将系列指定为值数组，我可以看到数据名称吗？

这里是不起作用但我想使用的代码：

<html>
<head>
<title>HighCharts pie</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
Highcharts.setOptions({    
    lang: {                
        decimalPoint: '.', 
        thousandsSep: ','  
    }                      
});                        
$(function () {                 
    $('#container').highcharts({
        chart: {                
            type: 'pie',        
            height: '500',         
            width: '750',          
            borderColor: '#EBBA95',
            borderWidth: 2         
        },                         
        plotOptions: {                                    
            pie: {                                        
                allowPointSelect: true,                   
                cursor: 'pointer', 
                showInLegend: true, 
                dataLabels: {                             
                    enabled: true,                        
                    format: '{point.y:,.0f}'              
                }                                         
            }                                             
        },                                                
        title: {                                          
            text: 'Rental Amounts for Paramount Directors'
        },                                                
        legend: {                                         
            enabled: true                                 
        },                                                
        xAxis: {                                                                
            categories: ["BADHAM, J", "COPPOLA, F", "GUILERMAN, J", "HILLER, A",
                         "SPIELBERG, S"],                                       
        },         
        series: [{                                                    
            name: 'Directors',                                        
            data: [74100000, 30673000, 36915000, 50000000, 90434000], 
        }]                                                            
    });                              
});                                  
</script>                                                    
</head>                                                      
<body>                                                       
<div id="container" style="width:600px; height:400px;"></div>
</body>                                                      
</html>

当我将系列指定为具有命名值的对象列表时，以下代码确实有效：

<html>
<head>
<title>HighCharts pie</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
Highcharts.setOptions({    
    lang: {                
        decimalPoint: '.', 
        thousandsSep: ','  
    }                      
});                        
$(function () {                 
    $('#container').highcharts({
        chart: {                
            type: 'pie',        
            height: '500',         
            width: '750',          
            borderColor: '#EBBA95',
            borderWidth: 2         
        },                         
        plotOptions: {                                    
            pie: {                                        
                allowPointSelect: true,                   
                cursor: 'pointer', 
                showInLegend: true,                       
                dataLabels: {                             
                    enabled: true,                        
                    format: '{point.y:,.0f}'              
                }                                         
            }                                             
        },                                                
        title: {                                          
            text: 'Rental Amounts for Paramount Directors'
        },                                                
        legend: {                                         
            enabled: true                                 
        },                                                
        series: [{                                        
            name: "Directors",                            
            slicedOffset: 20,                             
            data: [{    
               name: "BADHAM, J",                         
               y:    74100000                             
            }, {                
               name: "COPPOLA, F",                        
               y:    30673000                             
            }, {                  
               name: "GUILERMAN, J",                      
               y:    36915000                             
            }, {                    
               name: "HILLER, A",    
               y:    50000000        
            }, {                     
               name: "SPIELBERG, S", 
               y:    90434000        
            }]                
        }]                           
    });                              
});                                  
</script>                                                    
</head>                                                      
<body>                                                       
<div id="container" style="width:600px; height:400px;"></div>
</body>                                                      
</html>

【问题讨论】：

标签： highcharts legend pie-chart

【解决方案1】：

5 年后，这样做：

legend: {
    enabled: true,
    labelFormatter: function() {
    let legendName = this.series.chart.axes[0].categories[this.x];
    return legendName;}}

【讨论】：

【解决方案2】：

您可以使用 tooltip.formatter 和 legend.labelFormatter 并访问 highchart 选项来执行此操作。

对于工具提示文本：

tooltip: {
  formatter: function() {
    var sliceIndex = this.point.index;
    var sliceName = this.series.chart.axes[0].categories[sliceIndex];
    return 'The value for <b>' + sliceName +
      '</b> is <b>' + this.y + '</b>';
  }
},

对于传说：

legend: {
  enabled: true,
  labelFormatter: function() {
    var legendIndex = this.index;
    var legendName = this.series.chart.axes[0].categories[legendIndex];

    return legendName;
  }
},

直播demo.

【讨论】：

完美运行！谢谢！