Question

图例中是否可以同时包含colorAxis和series？ 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]
]

您将在此处通过seriesMapping: [{x: 0, y: 1, value: 2}, {x: 0, y: 1, value: 3}]选项映射两个系列：2018和2019。

因此，您将获得以下两个系列：

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。由于两个系列的x坐标都为0，因此它们会重叠。

要解决您的问题，您需要更改数据（或对数据进行预处理，以方便些）。例如：

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/

在图例中显示Series和colorAxis

2 个答案: