Highcharts：将可点击的图像添加到每个xAxis gridLine [英] Highcharts: Adding clickable image to every xAxis gridLine

问题描述

我正在构建一些自定义功能，用户可以点击折线图中的数据点向该日期添加注释。这有点让人误解，因为这些笔记实际上并未附加到度量标准本身，而是它所处的日期。换句话说，如果我在一个折线图上有6个系列，横跨2012年1月12日 - 2012年8月1日，那么在01/05/12上的一个单注将适用于所有6个系列。因此，您可以想象点击6个系列其中一个系列的数据点或2012年5月1日的数据点会误导用户认为此笔记将应用于该数据点，而不是整个日期和任何系列因此，为了弥补这个可用性问题，我决定最好的视觉提示应该是这样的：

每个xAxis gridLine的顶部会有一个可点击的图标，需要使用xAxis gridLine进行缩放（例如，如果用户选择要放大的区域）。

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

基于Mark的建议，使用 redraw 事件来定位图像并使用 load 事件来创建它们。将它们添加到 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 的完整示例

截图：

I'm building in some custom functionality where users can click on data points in a line chart to add notes to that date. This is a bit misleading as the notes aren't actually attached to the metrics themselves but rather the date it lands on. In other words, if I have 6 series on one line chart that spans the dates 01/01/12 - 01/08/12, a single note on 01/05/12 will apply to all 6 series. So, as you can imagine clicking on a data point on one of the 6 series or the date 01/05/12 would mislead the user to believe that this note would be applied to that data point, not the entire date and any series that lands on that date.

So, to remedy this usability issue I've decided that the best visual cue would be something like this:

There would be a clickable icon at the top of each xAxis gridLine that would need to scale with the xAxis gridLine (like if a user selects an area to zoom in on).

Suggestions on best way to pull this off? I only need a suggestion for how best to add the icon to every line... I have all post-click functionality already built.

解决方案

Building on Mark's suggestion using redraw event to position the images and using load event to create them. Adding them on load is necessary to make them available during export and you would not want to create new images on each redraw either.

These chart events are used:

events: {
    load: drawImages,
    redraw: alignImages
}

In the drawImages function I'm using the inverse translation for the xAxis to position the images on the chart:

x = chart.plotLeft + chart.xAxis[0].translate(i, false) - imageWidth / 2,
y = chart.plotTop - imageWidth / 2;

and then adding them and setting a click handler, zIndex, pointer cursor:

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(); 

In alignImages the attr function is used to set new x and y values for the images which are calculated the in the same way as in drawImages.

Full example on jsfiddle

Screenshot:

这篇关于Highcharts：将可点击的图像添加到每个xAxis gridLine的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！