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

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