Show Series and colorAxis both in Legend

问题

Is it possible to have both colorAxis and series in the legend? http://jsfiddle.net/6k17dojn/ i see i can only show one at a time when I toggle this setting
colorAxis: { showInLegend: true, }

回答1:

Currently to show a basic legend with colorAxis, you need to add some code to Highcharts core. This plugin below allows you to add colorAxis to a legend if showInLegend property is set to 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))

Live demo: http://jsfiddle.net/BlackLabel/hs1zeruy/

API Reference: https://api.highcharts.com/highcharts/colorAxis.showInLegend

Docs: https://www.highcharts.com/docs/extending-highcharts

回答2:

It's possible, but not with the data you currently work with. A heatmap's data is a set of coordinates, but here, your two series overlap.

Your raw data is :

[
  [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]
]

From there, you're mapping two series: 2018, and 2019 via the seriesMapping: [{x: 0, y: 1, value: 2}, {x: 0, y: 1, value: 3}] option.

You thus end up with the following two series:

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] 
]                     ]                    ]

Notice that in both cases, the coordinates are the same, but for 2019, the x value should be 1. Since you have 0 as x coordinate for both series, they overlap.

To fix you issue, you need to change your data (or pre-process it, whatever is easier). For example:

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}]
},

You can see it in action here: http://jsfiddle.net/Metoule/qgd2ca6p/6/

来源：https://stackoverflow.com/questions/56850787/show-series-and-coloraxis-both-in-legend

标签

Highcharts