Question

我想在图表的顶部显示legend的线系列，在右侧显示colorAxis的热图。有一个全局选项可以放置图例，但每个系列都没有单独的选项。

Highcharts版本：v4.3.1

Answer 1

该功能尚未在Highcharts核心中实现，但应尽快可用：https://github.com/highcharts/highcharts/issues/11309

目前，您可以通过以下方式将colorAxis从图例移动到图表上的其他位置：

(function(H) {
    H.wrap(H.ColorAxis.prototype, 'drawLegendSymbol', function(proceed) {
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));

        this.legendItemWidth = 0;
        this.legendItemHeight = 0;
    });
}(Highcharts));

Highcharts.chart('container', {
    chart: {
        marginRight: 80,
        events: {
            load: function() {
                var chart = this,
                    colorAxis = chart.colorAxis[0].axisParent.element,
                    mainSVG = chart.container.children[0],
                    xPos = chart.plotLeft + chart.plotWidth + 10,
                    yPos = chart.plotTop;

                mainSVG.appendChild(colorAxis);

                colorAxis.setAttribute(
                    'transform', 'translate(' + xPos + ', ' + yPos + ')'
                )
            }
        }
    },
    series: [{
        ...,
        showInLegend: true
    }, {
        ...,
        showInLegend: true
    }],
    colorAxis: {
        layout: 'vertical'
    }
});

实时演示： http://jsfiddle.net/BlackLabel/0c9fkvwp/

API参考： https://api.highcharts.com/highcharts/chart.events

文档： https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

在Highchart中的不同位置显示图例和colorAxis

1 个答案: