我正在构建一些自定义功能,用户可以在折线图中单击数据点以添加该日期的注释.这有点误导,因为音符实际上并未附加到指标本身,而是附加到它的日期.换句话说,如果我在横跨日期01/01/12 – 01/08/12的一个折线图上有6个系列,则在2012年5月1日的单个注释将适用于所有6个系列.所以,你可以想象点击6系列之一或01/05/12日期的数据点会误导用户相信该笔记将应用于该数据点,而不是整个日期和任何系列在那个日子登陆.
因此,为了解决这个可用性问题,我决定最好的视觉提示是这样的：
每个xAxis gridLine顶部都会有一个可点击的图标,需要使用xAxis gridLine进行缩放(就像用户选择要放大的区域一样).
解决方法
基于Mark的建议,使用重绘事件来定位图像并使用load事件来创建它们.在导出期间添加它们是必要的,以便在导出期间使它们可用,并且您不希望在每次重绘时创建新图像.
使用这些图表事件：
events: {
load: drawImages,redraw: alignImages
}
在drawImages函数中,我使用xAxis的逆平移来定位图表上的图像：
x = chart.plotLeft + chart.xAxis[0].translate(i,false) - imageWidth / 2,y = chart.plotTop - imageWidth / 2;
然后添加它们并设置单击处理程序,zIndex,指针光标：
chart.renderer.image('http://highcharts.com/demo/gfx/sun.png',x,y,imageWidth,imageWidth)
.on('click',function() {
location.href = 'http://example.com'
})
.attr({
zIndex: 100
})
.css({
cursor: 'pointer'
})
.add();
在alignImages中,attr函数用于为图像设置新的x和y值,这些值的计算方法与drawImages相同.
jsfiddle的完整示例
截图：
