高亮显示鼠标在某个范围内的位置
Highcharts - highlight mouse position within a range
当鼠标在highcharts中折线图的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
});
if (event.offsetX > SOME_VALUE) circle.show();
});
缺点是我比较事件。offsetX代替event.xAxis[0]。值,即我比较的是鼠标在页面中的xValue,而不是图表中的xAxis值。
Thanks in advance
您可以使用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-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]
}]
});
相关文章:
- Angularjs无法将单选按钮与嵌套范围内的模型绑定
- 如何使用D3生成特定范围内的随机颜色
- 将自定义css保持在角度范围内
- Angular JS-文本框未在独立范围内更新
- cookie不在网站范围内
- 获取给定JavaScript范围内的解析函数
- 如何在JavaScript中使用此函数对范围内的所有数字求和
- JavaScript-仅验证数值并且在范围内
- JS:从数组中查找特定范围内的最低/最高数字
- 试图检查表单中的值是否为一个设定范围内的数字
- 在十进制范围内搜索
- 基于日期范围的一组日期范围内的天数
- 如何在 Google 应用脚本中 sendEmail 函数的范围内的唯一非空白列中返回值
- 将数组传递给函数或确保它在范围内
- socket.io 客户端是否必须存在于全局范围内
- 查找某个日期范围内的可用天数
- 网站范围内jQuery/javascript选择器的最佳实践
- 如果指令包含在另一个指令中,我如何在隔离范围内添加双向数据绑定属性
- JS日期对象在某个范围内的百分比
- 高亮显示鼠标在某个范围内的位置