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

eomnis 发布于 2019-11-08 highcharts 最后更新 2019-11-08 22:59 12 浏览

这是我第一次与HighCharts合作,我想做一个Sankey图表。在我的数据标签中,我想显示一个包含三个项目的数组,并且我想在一个单独的框中显示这些项目中的每一个。我怎样才能将它们分开?正如您可以看到here,首先映射,现在所有三个项目都显示在一个框中。 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'
}]
});
已邀请:

ererum

赞同来自:

如果我正确地得到了您的问题 - 那么您应该在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;
            }
        }
    }
},
这是plunker