Highcharts - Sankey图表 - 如何将一些系列数据的Labels名称显示为图标或一些不同的名称。

Question

我有一个简单的sankey图表的highcharts，我使用一个样本数据绘制它。我正在使用一个样本数据来绘制它。每件事都在正常工作，但我需要以不同的名称来显示一些dataLabels。例如在我的数据中有巴西1和加拿大1，所以在其包含巴西1和加拿大1的地方，我需要使用一些条件来显示巴西和加拿大。这里我可以手动改变它，但我的链接将无法正常工作，它不会指向对方。

超文本标记语言

<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

你可以通过以下方法自定义标签的格式。

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

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

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.netMetouleq80t36ay1。