Highcharts - Диаграмма Санки - Как отобразить название ряда меток dataLabels на иконку или другое имя

Question

У меня есть простые диаграммы Санки из старших карт. Я строю график, используя образцы данных. Все работает нормально, но мне нужно отобразить некоторые метки данных под другим именем. Например, в моих данных есть 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> 

SCRIPT

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.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.net/Metoule/q80t36ay/1/