Highcharts：自动缩放渲染的形状和图表？

Question

我使用 chart.renderer.rect() 在图表上放置了一个盒子形状。当我水平调整页面大小时，我希望那个框变得更细（就像图表一样）。

我可以在检查器中看到，当我调整页面大小时，所有 SVG 图表元素的宽度属性都发生了变化，但我的渲染框形状没有变化。他们是怎么做到的？是否有一些属性我必须添加到我渲染的盒子形状中？

我还注意到 add() method 有一个父项，但我不知道如何从我添加它的图表中获取 SVGElement，我不确定设置父项是否会给我反正我想要的自动缩放。

Answer 1

您可以存储对元素的引用并编辑它的属性，例如基于轴值。示例：

chart: {
    events: {
        render: function() {
            const chart = this;
            const xAxis = chart.xAxis[0];
            const yAxis = chart.yAxis[0];
            const startX = xAxis.toPixels(1);
            const startY = yAxis.toPixels(7);
            const width = xAxis.toPixels(6) - startX;
            const height = yAxis.toPixels(4) - startY;

            if (!chart.customRect) {
                chart.customRect = chart.renderer.rect().attr({
                    'stroke-width': 2,
                    stroke: 'red',
                    fill: 'yellow'
                }).add();
            }

            chart.customRect.attr({
                x: startX,
                y: startY,
                width,
                height
            });
        }
    }
}

现场演示： http://jsfiddle.net/BlackLabel/p6743jam/

API参考：

https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr

https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels

Highcharts：自动缩放渲染的形状和图表？

Highcharts: Auto-scale rendered shape along with chart?

javascript

svg

highcharts