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

HighCharts: Resize markers of scatter chart dynamically

本文关键字：散点图 动态 调整 HighCharts      更新时间：2023-09-26

我使用的是HighCharts 4.0.4版本。我有一张散点图，上面有宽度和高度的百分比值。因此，如果容器/窗口的大小发生变化，图形会自动调整大小。

唯一大小不变的是标记的半径，因为我似乎只能定义一个数字，请参阅此处plotOptions.scatter.marker.radius.

这里有一个JSFiddle，它的修复radius为10。

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

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

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

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

相关文章：