Как отобразить условные обозначения для всех данных ряда в столбчатой ​​диаграмме с накоплением 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 : "";
  }
}

Answer 2

Вы также можете просто установить legendType: 'point':

series: [{
    legendType: 'point',
    data: [ ... ]
}]

Демонстрационная версия: http://jsfiddle.net/BlackLabel/9kqLsfza/