Highcharts：向每个 xAxis gridLine 添加可点击图像

Question

我正在构建一些自定义功能，用户可以单击折线图中的数据点来添加该日期的注释。这有点误导，因为注释实际上并未附加到指标本身，而是附加到其发布的日期。换句话说，如果我在一个折线图上有 6 个系列，跨越日期 01/01/12 - 01/08/12，则 01/05/12 上的单个注释将适用于所有 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.

它们将具有 svg“文本元素”子元素，其位置为 (x, y)。