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（您将不得不计算出更好的增长/减少算法。