javascript - 如何在堆积柱形图 Highcharts 中显示所有系列数据的图例？

Question

在这张图表中，我想用它的乐队颜色显示所有人的名字，作为拥有不同水果的传说。这里有些人可以有很多种水果，但我不想显示两次名称。这里只显示系列名称，但我想在底部显示所有人的名字。有人可以帮我解决这个问题吗？

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: ''
    },
    xAxis: {
        categories: ['Apples', 'Oranges','Bananas']
    },
    yAxis: {
        min: 0,
        title: {
            text: ''
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{point.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },
    credits: {
        enabled: false
    },
    series : [{
    	data : [{
				x:0,
				y:3,		
				name:'John',
				color:'#FF5733'
			},
			{
				x:0,
				y:5,
				name:'Parker',
				color:'#009900'
			},{
				x:0,
				y:1,
				name:'Adam',
				color:'#95FF33'
			},{
				x:1,
				y:5,
				name:'Alex',
				color:'#E3FF33'
			},{
				x:1,
				y:3,
				name:'Pukal',
				color:'#33BDFF'
			},{
				x:1,
				y:4,
				name:'Mark',
				color:'#FB33FF'
			},{
				x:2,
				y:3,
				name:'John',
				color:'#FF5733'
			},{
				x:2,
				y:4,
				name:'Parker',
				color:'#009900'
			},{
				x:2,
				y:2,
				name:'Mark',
				color:'#FB33FF'
			}]
		}]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
	<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Answer 1

我会将数据转换为多个系列而不是一个系列的形式，如下所示:

{
  series : [
    { name: "John", color: "#FF5733", data: [3, 0, 3] }
    { name: "Parker", color: "#009900", data: [5, 0 4] }
    .. etc ...
  ]
}

然后 Highcharts 会自动使用这个人的名字作为图例。

这是一个Fiddle表明我的意思。

我使用这段代码将数据转换为多个系列:

var data = [];
var seriesLookup = {};
original.forEach(function(item){
  var series = seriesLookup[item.name];
  if(!series){
    series = {
      name: item.name,
      color: item.color,
      data: [0, 0, 0]
    };
    data.push(series);
    seriesLookup[item.name] = series;
  }
  series.data[item.x] = item.y;
});

然后我将 tooltip.pointFormat 更改为使用 series.name 而不是 point.name

tooltip: {
  headerFormat: '<b>{point.x}</b><br/>',
  pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},

我还使用了 dataLabels.formatter 来忽略 0 值。

dataLabels: {
  enabled: true,
  color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
  formatter: function(){
    return (this.y!=0) ? this.y : "";
  }
}