具有不同“名称”的图例和数据标签

问题描述：

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

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' 
     }); 
    }); 
});

}）;

我基本上想要datalabels显示货币值（即$ ##。##）和百分比。但传说继续显示“当前，31-60等”

有什么建议吗？

答

好的，所以我了解到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/

具有不同“名称”的图例和数据标签

相关推荐