Highcharts：不同屏幕尺寸断点上的渲染器定位问题

在H igh charts中，可以使用 chart.events.load 事件来获取图表渲染完成后的回调。通过 chart.containerWidth 和 chart.containerHeight 属性可以获取图表 容器 的宽度和高度。根据这些属性的值，可以动态调整渲染器的位置。

以下是一个示例代码，演示了如何在不同屏幕尺寸断点上处理渲染器定位问题：

Highcharts.chart('container', {
    chart: {
        events: {
            load: function() {
                var chart = this;
                // 获取容器的宽度和高度
                var containerWidth = chart.containerWidth;
                var containerHeight = chart.containerHeight;
                // 根据容器的宽度和高度设置渲染器的位置
                if (containerWidth < 600) {
                    chart.renderer.text('Small Screen', 10, 20)
                        .attr({
                            'stroke-width': 2,
                            'stroke': 'red',
                            'fill': 'white'
                        .add();
                } else {
                    chart.renderer.text('Large Screen', containerWidth - 100, containerHeight - 20)
                        .attr({
                            'stroke-width': 2,
                            'stroke': 'red',
                            'fill': 'white'
                        .add();
    // 配置其他图表选项
    // ...
在上面的示例中，根据容器的宽度和高度，分别在小屏幕和大屏幕上添加了不同位置的渲染器。你可以根据实际需求自定义渲染器的位置和样式。
这样，在不同屏幕尺寸断点上，渲染器的定位问题就可以得到解决。