Highcharts - 突出显示范围内的鼠标位置 [英] Highcharts - highlight mouse position within a range
问题描述
当鼠标位于HIighCharts折线图的xAxis范围内时,我需要突出显示鼠标位置。
我想显示一个圆圈来突出显示鼠标的位置。但我只希望这个功能只适用于过去25个xAxis值。
在Highcharts中可以这样做吗?
一种方法是通过下面的代码,但它有其局限性:
var circle = chart.renderer.circle(0,0,5).attr({
fill:'blue',
stroke:'black',
'stroke-width': 1
})。add()
.toFront()
.hide();
$(chart.container).mousemove(function(event){
circle.attr({
x:event.offsetX,
y:event.offsetY $ b $(b)if(event.offsetX> SOME_VALUE)circle.show();
});
缺点是我比较event.offsetX而不是event.xAxis [0] .value ie我在比较页面中鼠标的xValue,而不是图表中的xAxis值。
预先致谢
point.plotX
和 chart.plotLeft
图表,请参阅: http://jsfiddle.net/PNMAG/35/ 片段:
function addCircle(){
var chart = this;
var circle = chart.renderer.circle(0,0,5).attr({
fill:'blue',
stroke:'black',
'stroke-宽度':1
})。add()
.toFront()
.hide();
$(chart.container).mousemove(function(event){
var normalizedEvent = chart.pointer.normalize(event);
if(normalizedEvent。 chartX> chart.series [0] .data [5] .plotX + chart.plotLeft){
circle.attr({
x:normalizedEvent.chartX,
y:normalizedEvent.chartY
$}}。show();
} else {
circle.hide();
}
});
var chart = new Highcharts.Chart({
图表:{
renderTo:'container',
type:'area',
events :{
load:addCircle
}
},
series:[{
data:[29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5 ,216.4,194.1,95.6,54.4]
},{
数据:[71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4,20]
}]
});
I need to highlight mouse position when mouse is within a xAxis range of a line chart in HIighCharts. I want to display a circle to highlight the mouse position. But I want this functionality only for the last 25 xAxis values.
Is it possible to do this in Highcharts?
One way is by following code but it has its limitations:
var circle = chart.renderer.circle(0, 0, 5).attr({
fill: 'blue',
stroke: 'black',
'stroke-width': 1
}).add()
.toFront()
.hide();
$(chart.container).mousemove(function (event) {
circle.attr({
x: event.offsetX,
y: event.offsetY
});
if (event.offsetX > SOME_VALUE) circle.show();
});
The shortcomings are that I am comparing event.offsetX instead of event.xAxis[0].value i.e. I am comparing the xValue of mouse in page rather than xAxis value in chart.
Thanks in advance
You can use point.plotX
and chart.plotLeft
to get position on a chart, see: http://jsfiddle.net/PNMAG/35/
Snippet:
function addCircle() {
var chart = this;
var circle = chart.renderer.circle(0, 0, 5).attr({
fill: 'blue',
stroke: 'black',
'stroke-width': 1
}).add()
.toFront()
.hide();
$(chart.container).mousemove(function(event) {
var normalizedEvent = chart.pointer.normalize(event);
if (normalizedEvent.chartX > chart.series[0].data[5].plotX + chart.plotLeft) {
circle.attr({
x: normalizedEvent.chartX,
y: normalizedEvent.chartY
}).show();
} else {
circle.hide();
}
});
}
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'area',
events: {
load: addCircle
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 20]
}]
});
这篇关于Highcharts - 突出显示范围内的鼠标位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!