Javascript 轴上带有标签的Highcharts十字线
是否可以使highcharts十字线在单独标签的轴上显示实际值 API中的常规十字线示例不能做到这一点。如果我设定Javascript 轴上带有标签的Highcharts十字线,javascript,jquery,highcharts,tooltip,Javascript,Jquery,Highcharts,Tooltip,是否可以使highcharts十字线在单独标签的轴上显示实际值 API中的常规十字线示例不能做到这一点。如果我设定 tooltip: { crosshairs: [true, true] } ,它不能满足我的需要。 我需要这样的图表: 默认情况下,这是不可能的,但您可以设置鼠标覆盖/鼠标事件,并使用渲染器添加自定义形状/对象 这只是一个一般的想法:-您需要添加检查光标是否在绘图内的功能(使用图表.绘图[左/上/宽/高]),并且您可能需要使用事件.页面[X/Y]以外的其他
tooltip: {
crosshairs: [true, true]
}
,它不能满足我的需要。
我需要这样的图表:
默认情况下,这是不可能的,但您可以设置鼠标覆盖/鼠标事件,并使用渲染器添加自定义形状/对象 这只是一个一般的想法:-您需要添加检查光标是否在绘图内的功能(使用
图表.绘图[左/上/宽/高]
),并且您可能需要使用事件.页面[X/Y]
以外的其他功能来获取位置
代码:
$("#container").mousemove(move);
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
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]
}]
});
function move(event) {
var x = event.pageX,
y = event.pageY,
path = ['M', chart.plotLeft, y,
'L', chart.plotLeft + chart.plotWidth, y,
'M', x, chart.plotTop,
'L', x, chart.plotTop + chart.plotHeight];
if (chart.crossLines) {
// update lines
chart.crossLines.attr({
d: path
});
} else {
// draw lines
chart.crossLines = chart.renderer.path(path).attr({
'stroke-width': 2,
stroke: 'green',
zIndex: 10
}).add();
}
if (chart.crossLabel) {
// update label
chart.crossLabel.attr({
y: y + 6,
text: chart.yAxis[0].toValue(y).toFixed(2)
});
} else {
// draw label
chart.crossLabel = chart.renderer.text(chart.yAxis[0].toValue(y).toFixed(2), chart.plotLeft - 40, y + 6).add();
}
}
这是在Highstock API中实现的,请参阅 要将其用于Highcharts,只需加载highstock.js并初始化常规Highcharts:
我认为Y轴上带有标签的十字光标对于常规的条形图/折线图是有意义的,而不仅仅是股票图,因此我建议将此功能移植到Highcharts。改进版,检查
x,Y
位置:
crosshair: {
label: {
enabled: true,
padding: 8
}
}