Highcharts-Sankey图表-如何将一些系列数据标签名称显示为图标或其他名称

Question

我有一个简单的sankey图表。我正在用一个样本数据绘制它。一切都很好，但我需要将一些dataLabels显示为不同的名称。例如，在我的数据中有Brazil1和Canada1，所以它包含Brazil1或Canada1的地方，我需要使用一些条件来显示巴西和加拿大。在这里，我可以手动更改它，但我的链接无法正常工作。它不会指向彼此。这是我在下面的代码

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div> 

脚本

Highcharts.chart('container', {
title: {
text: 'Highcharts Sankey Diagram'
},
accessibility: {
point: {
valueDescriptionFormat: '{index}. {point.from} to {point.to}, {point.weight}.'
}
},
exporting: {
chartOptions: {
series: [{
dataLabels: {
style: {
fontSize: "6px",
fontWeight: "normal"
}
}
}]
}
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
['Brazil', 'Brazil1', 5],
['Brazil', 'France', 1],
['Brazil', 'Spain', 1],
['Brazil', 'England', 1],
['Canada', 'Canada1', 1],
['Canada', 'France', 5],
['Canada', 'England', 1],
],
dataLabels: {
allowOverlap: true,
style: {
fontSize: "15px",
fontWeight: "normal"
}
},
type: 'sankey',
name: 'Sankey demo series'
}]
});

Answer 1

您可以使用以下方法自定义标签的格式：

• 工具提示：tooltip.pointFormatter
• 节点上的数据标签：dataLabels.nodeFormatter
• 箭头上的数据标签：dataLabels.formater

请注意，您需要提供一个翻译表，将您不需要的国家名称映射到您想要的国家名称。例如：

countries = {
Brazil1: 'Wanted Brazil1 name', 
Canada1: 'Wanted Canada1 name', 
};

工具提示

在该格式化程序中，数据点{ from, to, weight }可以通过this访问，因此我们可以写：

tooltip: {
pointFormatter: function() {
console.log('tooltip formatter', this);
point = this;
from = countries[point.from] || point.from;
to = countries[point.to] || point.to;
weight = point.weight
return from + ' → ' + to + ': ' + weight;
},
}, 

节点上的标签

在该格式化程序中，可以通过this.key访问该国家，因此我们可以写：

dataLabels: {
nodeFormatter: function() {
console.log('node formatter', this);
return countries[this.key] || this.key;
},
},

箭头上的标签

在该格式化程序中，数据点{ from, to, weight }可以通过this.point访问，因此我们可以写：

dataLabels: {
formatter: function() {
console.log('formatter', this);
point = this.point;
from = countries[point.from] || point.from;
to = countries[point.to] || point.to;
weight = point.weight
return from + ' → ' + to + ': ' + weight;
},
},

你可以在这里看到它的作用：https://jsfiddle.net/Metoule/q80t36ay/1/