Highcharts - 缩放时如何动态更改标记半径？答案

【问题标题】：Highcharts - How do I dynamically change Marker radius when zooming?Highcharts - 缩放时如何动态更改标记半径？
【发布时间】：2013-03-12 07:38:21
【问题描述】：

我正在使用“散点图”系列类型的 Highcharts。我还启用了 x 轴缩放功能。

现在最好将标记半径调整为缩放级别。比如：

events: {
    selection: function(event) {
        var extremesObject = event.xAxis[0],
            min = extremesObject.min,
            max = extremesObject.max;

        this.series[0].marker.radius = (max - min)/5;
    }

}

最后一行this.series[0]... 是我要查找的代码。

我试过了：

        jQuery.each(this.series[1].data, function (i, point) {
            point.update({
                marker: {
                    radius: 10 / (max - min)
                }
            });
        });

但这在重绘事件中使用时会给我一个错误。这是一个例子：http://jsfiddle.net/dbX4F/2/

【问题讨论】：

标签： highcharts

【解决方案1】：

我认为这在当前版本的 highcharts 中是不可能的，因为它没有更新系列选项的 API。但是，在 v3Beta 版本中是可能的。

缩放的数学需要做一些工作，但我已经掌握了基础知识：http://jsfiddle.net/Jrh2G/

events: {
    selection: function (event) {
        var extremesObject = event.xAxis[0],
         min = extremesObject.min,
         max = extremesObject.max;
        console.log(min + " " + max);
        // The maths needs some work to make the radius scale better with min/max.
        // Also, you should probabl take into account min/max y values as well.
        this.series[0].update({marker:{radius:10/(max-min)}});
}

【讨论】：

太好了，这行得通！但我不确定我是否应该使用 Beta 版本，因为这是用于商业服务器...我尝试使用非 beta 进行类似的操作，但给了我一个错误：jQuery.each(this.series[0].data, function(i, point) { point.update({marker:{radius:10/(max-min)}}); });
测试版将于本月发布。我一直在研究它或我们的生产环境，因为我们需要气泡图功能。到目前为止看起来还不错，尽管我在气泡图中报告了一个错误。
我不得不把它放在重绘事件回调中，因为我有一个主从配置（highcharts.com/demo/dynamic-master-detail）。我得到的错误是：Error: TypeError: j.redraw is not a function Source File: http://code.highcharts.com/highcharts.js Line: 190
也许您可以将简化的示例发布到 jsfiddle ？
您需要在每个点上调用 update(option,false)。 false 告诉 highcharts 不要重绘。如果你在 redraw 函数中返回 true，它会在最后重绘。 jsfiddle.net/VhqaQ.

【解决方案2】：

最后，我找到了解决方案。可以在与图形数据相同的数组中传递点配置：

jQuery.each(data, function(i, val) {
    if (i > min && i < max) {
        detailScatter.push({
            marker: {
                radius: 80 / (max - min)
            },
            x: i,
            y: val
        });
    }
});

detailChart.series[1].setData(detailScatter);

像魅力一样工作 - 请参阅此处：http://jsfiddle.net/dbX4F/3/

【讨论】：