Legend和DataLabels有不同的“名字”

时间:2015-03-13 17:21:43

标签: highcharts

我还没有看到其他人试图这样做。我基本上有一组数据用于我的“系列”集合中的饼图,但是在图例中而不是吐出这些货币值,我想“分类”它们。我认为我之前通过对完整事件中的点名称进行“图例”更新来实现此功能,但现在它似乎也在更改数据标签名称。这是我的小提琴/代码:

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: [
            ['$64,351.70', 90.0], {
                name: '$4,580.37',
                y: 6.0,
                sliced: true,
                selected: true
            }, ['$742.31', 1.0],
            ['$1231.43', 2.0],
            ['499.97', 1.0],
            ['$74.54', 0.0],
            ['$32.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'
        });
    });
});

});

我基本上希望数据标签显示货币价值(即$ ##。##)和百分比。但传说继续显示“当前,31-60等”

有什么建议吗?

1 个答案:

答案 0 :(得分:4)

好的,所以我了解到legend属性有一个“labelFormatter”选项,它允许您创建一种LookUp值表来标记图例的名称。很酷。

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

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

        legend: {
        enabled: true,
        labelFormatter: function () {
            return {
                '$64,351.70' : 'Current',
                '$4,580.37': '31-60',
                '$742.31': '61-90',
                '$1231.43': '91-120',
                '$499.97': '121-150',
                '$74.54': '151-180',
                '$32.35': 'Over 180'
            }[this.name];
        }
    },enter code here

更新小提琴:http://jsfiddle.net/Lyuo4f9g/2/