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

时间:2013-03-12 07:38:22

标签: highcharts

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

2 个答案:

答案 0 :(得分: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)}});
}

答案 1 :(得分:0)

最后,我找到了解决方案。可以在与图数据相同的数组中传递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/