Highcharts:将可点击图像添加到每个xAxis gridLine

Question

我正在构建一些自定义功能,用户可以在折线图中单击数据点以添加该日期的注释.这有点误导,因为音符实际上并未附加到指标本身,而是附加到它的日期.换句话说,如果我在横跨日期01/01/12 - 01/08/12的一个折线图上有6个系列,则在2012年5月1日的单个注释将适用于所有6个系列.所以,你可以想象点击6系列之一或01/05/12日期的数据点会误导用户相信该笔记将应用于该数据点,而不是整个日期和任何系列在那个日子登陆.

因此,为了解决这个可用性问题,我决定最好的视觉提示是这样的:

每个xAxis gridLine顶部都会有一个可点击的图标,需要使用xAxis gridLine进行缩放(就像用户选择要放大的区域一样).

建议最好的方法来解决这个问题？我只需要建议如何最好地将图标添加到每一行......我已经构建了所有的点击后功能.

Answer 1

基于Mark的建议,使用redraw事件来定位图像并使用load事件来创建它们.添加它们load是必要的,以便在导出期间使它们可用,并且您不希望在每个上都创建新图像redraw.

使用这些图表事件:

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的完整示例

截图: