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