javascript - HighCharts:动态调整散点图标记的大小

Question

我使用的是 HighCharts 4.0.4 版。我有一个散点图，其中包含宽度和高度的百分比值。因此，如果容器/窗口的大小发生变化，图表会自动调整大小。

唯一不变的是标记的半径，因为我好像只能定义一个数字，看这里plotOptions.scatter.marker.radius .

这是一个JSFiddle here固定 radius 为 10。

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'scatter',
            zoomType: 'xy'
        },
        plotOptions: {
            scatter: {
                marker: {
                    radius: 10
                }
            }
        }
        /*, ... */
    });
});

调整容器/窗口的大小，标记大小始终相同。但是我的网页使用百分比或 rem 值，我还想调整图表中所有标记的大小。如何做到这一点？

Answer 1

由于 radius 只需要一个数字，您可以将一个处理程序挂接到 window.resize(例如)并使用它来增加或缩小标记半径关于宽度是增加还是减少(您可以通过将具有新半径的对象传递给每个系列的 update 方法，以编程方式更改标记半径)。

我不知道那是不是你想走的路，但我已经更新了你的Fiddle用一个简单的例子来说明这一点。在其中，如果处理程序检测到宽度增加，我将标记半径增加 1，如果它检测到宽度减少，我将标记半径减少 1(您将必须找出更好的增长/减少算法。