Question

我正在使用系列类型为“scatter”的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/

Answer 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)}});
}

Answer 2

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

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/

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

2 个答案: