具有不同 "names" 的图例和数据标签

Question

我还没有看到其他人尝试这样做。在我的 "Series" collection 中，我基本上有一组数据用于饼图，但在图例中，我不想吐出这些货币值，而是想 "Categorize" 它们。我以为我之前通过对完整事件中的点名称进行 "legend" 更新来完成此工作，但现在它似乎也在更改数据标签名称。这是我的 fiddle/code:

http://jsfiddle.net/Lyuo4f9g/1/

$(function () {
var chart;
$('#pie_chart').highcharts({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },
    title: {
        text: null
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            showInLegend: true,
            dataLabels: {
                enabled: true,
                defer: false,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    colors: ['#77AEFF', '#94D664', '#E3DE51', '#D69567', '#D66664', '#aaaaab', '#a89375'],
    legend: {
        enabled: true
    },
    series: [{
        type: 'pie',            
        data: [
            [',351.70', 90.0], {
                name: ',580.37',
                y: 6.0,
                sliced: true,
                selected: true
            }, ['2.31', 1.0],
            ['31.43', 2.0],
            ['499.97', 1.0],
            ['.54', 0.0],
            ['.35', 0.0], 
        ]
    }]
}, function (chart) { // on complete
    $(document).ready(function () {
        chart.legend.allItems[0].update({
            name: 'Current'
        });
        chart.legend.allItems[1].update({
            name: '31-60'
        });
        chart.legend.allItems[2].update({
            name: '61-90'
        });
        chart.legend.allItems[3].update({
            name: '91-120'
        });
        chart.legend.allItems[4].update({
            name: '121-150'
        });
        chart.legend.allItems[5].update({
            name: '151-180'
        });
        chart.legend.allItems[6].update({
            name: 'Over 180'
        });
    });
});

});

我基本上希望数据标签显示货币价值（即 $##.##）和百分比。但是图例继续显示"Current, 31-60, etc"

有什么建议吗？

Answer 1

好的，所以我了解到 legend 属性有一个 "labelFormatter" 选项，它允许您创建一种 LookUp table 值来标记图例的名称。很帅

http://forum.highcharts.com/viewtopic.php?f=9&t=6202

基本上我的图例属性现在看起来像这样：

        legend: {
        enabled: true,
        labelFormatter: function () {
            return {
                ',351.70' : 'Current',
                ',580.37': '31-60',
                '2.31': '61-90',
                '31.43': '91-120',
                '9.97': '121-150',
                '.54': '151-180',
                '.35': 'Over 180'
            }[this.name];
        }
    },enter code here

已更新 Fiddle：http://jsfiddle.net/Lyuo4f9g/2/

具有不同 "names" 的图例和数据标签

Legend and DataLabels with different "names"

highcharts