Question

这是我第一次使用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'
}]

});

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;
            }
        }
    }
},

这是plunker

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

1 个答案: