Показать серию и цветовую ось как в Legend

Question

Возможно ли иметь в ColorAxis и серии в легенде?http://jsfiddle.net/6k17dojn/ я вижу, что могу показывать только по одному, когда я переключаю эту настройку
colorAxis: { showInLegend: true, }

Answer 1

В настоящее время для отображения базовой легенды с colorAxis необходимо добавить код в ядро ​​Highcharts. Этот плагин ниже позволяет добавлять colorAxis к легенде, если для свойства showInLegend установлено значение false:

(function(H) {
    H.addEvent(H.Legend, 'afterGetAllItems', function(e) {
        var colorAxisItems = [],
            colorAxis = this.chart.colorAxis[0],
            i;

        if (colorAxis && colorAxis.options) {
            if (colorAxis.options.dataClasses) {
                colorAxisItems = colorAxis.getDataClassLegendSymbols();
            } else {
                colorAxisItems.push(colorAxis);
            }
        }

        i = colorAxisItems.length;
        while (i--) {
            e.allItems.unshift(colorAxisItems[i]);
        }
    });
}(Highcharts))

---

Демо: http://jsfiddle.net/BlackLabel/hs1zeruy/

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

Документы: https://www.highcharts.com/docs/extending-highcharts

Answer 2

Это возможно, но не с данными, с которыми вы сейчас работаете. Данные тепловой карты - это набор координат, но здесь ваши две серии перекрываются.

Ваши необработанные данные:

[
  [0,0,0.2, 0.4],
  [0,1,0.1, 0.5],
  [0,2,0.4, 0.9],
  [0,3,0.7, 0.1],
  [0,4,0.3, 0.6]
]

Оттуда вы отображаете две серии: 2018 и 2019 с помощью опции seriesMapping: [{x: 0, y: 1, value: 2}, {x: 0, y: 1, value: 3}].

Таким образом, вы получите следующие две серии:

2018                  2019                 2019 should be
[                     [                    [            
  [0, 0, 0.2],         [0, 0, 0.4],         [1, 0, 0.4],
  [0, 1, 0.1],         [0, 1, 0.5],         [1, 1, 0.5],
  [0, 2, 0.4],         [0, 2, 0.9],         [1, 2, 0.9],
  [0, 3, 0.7],         [0, 3, 0.1],         [1, 3, 0.1],
  [0, 4, 0.3]          [0, 4, 0.6]          [1, 4, 0.6] 
]                     ]                    ]            

Обратите внимание, что в обоих случаях координаты одинаковы, но для 2019 года значение x должно быть равно 1. Поскольку у вас есть 0 как x координата для обеих серий, они перекрываются.

Чтобы решить вашу проблему, вам нужно изменить данные (или предварительно обработать их, что проще). Например:

var data = '[[0,0,0.2, 0.4],[0,1,0.1, 0.5],[0,2,0.4, 0.9],[0,3,0.7, 0.1],[0,4,0.3, 0.6]]';

var rows = JSON.parse(data);
rows = $.map(rows, function(arr){
    return [[
       arr[0], arr[1], arr[2], // 2018
       arr[0] + 1, arr[1], arr[3], // 2019
    ]];
});

// and the seriesMapping changes to
data: {
    rows: rows,
    firstRowAsNames: false,
    seriesMapping: [{x: 0, y: 1, value: 2}, {x: 3, y: 4, value: 5}]
},

Вы можете увидеть это в действии здесь: http://jsfiddle.net/Metoule/qgd2ca6p/6/