Highcharts：与图表一起自动缩放渲染形状？

【问题标题】：Highcharts: Auto-scale rendered shape along with chart?Highcharts：与图表一起自动缩放渲染形状？
【发布时间】：2021-09-29 00:15:35
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript svg highcharts

【解决方案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

【讨论】：

就可以了。谢谢！