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

截图: