HighCharts-如何在Sankey图中拆分数据标签？

Question

这是我第一次使用HighCharts，我想制作一个Sankey图。 在我的数据标签中，我想显示一个包含三个项目的数组，并希望在单独的框中显示每个项目。 如何分开？ 正如您在此处看到的，第一个映射，所有这三个项目现在都显示在一个框中。

JSFiddle我的代码：

var chart= Highcharts.chart('container', {
title: {
    text: 'Highcharts Sankey Diagram'
},

series: [{
    keys: ['from', 'to', 'weight'],
    data: [
        [['item1','item2', 'item3'], 'res', 5 ],
        ['Brazil', 'France', 1 ],
        ['Brazil', 'Spain', 1 ],
        ['Brazil', 'England', 1 ],
        ['Canada', 'Portugal', 1 ],
        ['Canada', 'France', 5 ],
        ['Canada', 'England', 1 ],
        ['Mexico', 'Portugal', 1 ],
        ['Mexico', 'France', 1 ],
        ['Mexico', 'Spain', 5 ],
        ['Mexico', 'England', 1 ],
        ['USA', 'Portugal', 1 ],
        ['USA', 'France', 1 ],
        ['USA', 'Spain', 1 ],
        ['USA', 'England', 5 ]         
    ],
     dataLabels: {

         borderWidth: 1,
         backgroundColor: 'rgb(224, 236, 255)',
         borderRadius: 5,
         style: {           
            fontSize: '1em'
        }
    },
    useHTML:'true',
    type: 'sankey',
    name: 'Sankey demo series'
}]

});

Answer 1

如果我正确回答了您的问题-那么您应该在plotOptions.sankey.dataLabels配置中使用nodeFormatter并将useHTML设置为true。 只需取值并为每个值创建单独的div（在您的示例中）。

plotOptions: {
    sankey: {
        dataLabels: {
            enabled: true,
            useHTML: true,
            nodeFormatter: function(point) {
            console.log(this, point);
            if (Array.isArray(this.key)) {
                return '<div>'+this.key.join('</div><div>')+'</div>';
            }
                return this.key;
            }
        }
    }
},

这是pl子