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

上的完整示例

截图：

Answer 2

一些想法。首先，我将使用图表redraw事件来了解重绘图表的时间（例如缩放）。然后，将图像显式放置在感兴趣的轴位置。直接从DOM中获取这些查询。

使用jQuery：

$('.highcharts-axis') //return an array of the two axis.

他们将拥有带有（x，y）位置的svg“text element”子项。