Тепловая карта Highcharts с пользовательскими цветами для каждой оси - PullRequest
Новая
       35

Тепловая карта Highcharts с пользовательскими цветами для каждой оси

0 голосов
/ 27 января 2020

Я пытаюсь создать тепловую карту с 3 категориями yAxis (менеджер, робот, оба), и мне нужно покрасить данные разными способами, например: максимальное значение для менеджера - зеленое, минимальное - красное, и для робота противоположное, максимум - красный, минимум - зеленый. Я пытался использовать colorAxis.dataClasses, но он работает только для диапазона, а не для оси.

Мой код (не работает) 

$(function () {

$('#container').highcharts({

    chart: {
        type: 'heatmap',
        marginTop: 40,
        marginBottom: 80
    },

    title: {
        text: 'Heatmap'
    },

    xAxis: {
        categories: ['01-01-2019', '02-01-2019', '03-01-2019', '04-01-2019', '05-01-2019', '06-01-2019', '07-01-2019', '08-01-2019', '09-01-2019', '10-01-2019']
    },

    yAxis: {
        categories: ['Bot', 'Manager', 'Both'],
        title: null
    },
    colorAxis: [
      {
        minColor: '#ff0000',
        maxColor: '#00ff45'
      }, 
      {
        minColor: '#00ff45',
        maxColor: '#ff0000',
      },
      {
        minColor: '#ffe700',
        maxColor: '#6300ff',
      },
    ],
    legend: {
                    align: 'right',
        layout: 'vertical',
        margin: 0,
        verticalAlign: 'top',
        y: 25
    },

    series: [{
        name: 'Sales per unit',
        borderWidth: 1,
        data: [[0, 0, 17], [0, 1, 9], [0, 2, 16], [1, 0, 10], [1, 1, 10], [1, 2, 21], [2, 0, 23], [2, 1, 28], [2, 2, 8], [3, 0, 23], [3, 1, 18], [3, 2, 26], [4, 0, 2], [4, 1, 28], [4, 2, 23], [5, 0, 16], [5, 1, 24], [5, 2, 18], [6, 0, 12], [6, 1, 19], [6, 2, 12], [7, 0, 3], [7, 1, 29], [7, 2, 14], [8, 0, 24], [8, 1, 10], [8, 2, 5], [9, 0, 21], [9, 1, 28], [9, 2, 2]],
        dataLabels: {
            enabled: true,
            color: '#000000'
        }
    }]

});

});

Изображение для примера enter image description here

Как мне достичь этого результата?

1 Ответ

1 голос
/ 27 января 2020

Вам нужно разделить ваши данные на 3 серии и назначить их для colorAxis: 

series: [{
  data: [
    ...
  ],

}, {
  colorAxis: 1,
  data: [
    ...
  ]
}, {
  colorAxis: 2,
  data: [
    ...
  ]
}]

Демонстрационная версия: http://jsfiddle.net/BlackLabel/6m4e8x0y/4769/

Справочник по API: https://api.highcharts.com/highcharts/series.heatmap.colorAxis

...