Highcharts: Agregando imagen clicable a cada xAxis gridLine

Question

Estoy desarrollando algunas funcionalidades personalizadas donde los usuarios pueden hacer clic en los puntos de datos en un gráfico de líneas para agregar notas a esa fecha. Esto es un poco engañoso ya que las notas no están realmente unidas a las métricas en sí, sino a la fecha en que aterriza. En otras palabras, si tengo 6 series en un gráfico de líneas que abarca las fechas 01/01/12 - 01/08/12, una sola nota el 01/05/12 se aplicará a las 6 series. Por lo tanto, como puede imaginar al hacer clic en un punto de datos en una de las 6 series o en la fecha 01/05/12, podría inducir a error al usuario a creer que esta nota se aplicaría a ese punto de datos, no a la fecha completa ni a ninguna serie que aterriza en esa fecha.

Así que, para remediar este problema de usabilidad que he decidido que la mejor señal visual sería algo como esto:

Habría un icono se puede hacer clic en la parte superior de cada línea de cuadrícula que haría ejeX necesita escalar con xAxis gridLine (como si un usuario selecciona un área para acercarse).

Sugerencias sobre la mejor manera de llevarlo a cabo? Solo necesito una sugerencia sobre la mejor manera de agregar el ícono a cada línea ... Tengo toda la funcionalidad post-clic ya construida.

Answer 1

Basándose en la sugerencia de Mark usando redraw evento para posicionar las imágenes y utilizando el evento load para crearlas. Es necesario agregarlos en load para que estén disponibles durante la exportación y tampoco desea crear nuevas imágenes en cada redraw.

Estos eventos se utilizan tabla:

events: { 
    load: drawImages, 
    redraw: alignImages 
} 

En la función drawImages estoy usando la traducción inversa para el eje x para colocar las imágenes en el gráfico:

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

y luego agregarlos y establecer un controlador de clics, zIndex, puntero del 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 La función attr se usa para establecer nuevos valores xey para las imágenes que se calculan de la misma manera que en drawImages.

Ejemplo completo en jsfiddle

Captura de pantalla:

Answer 2

Pareja de ideas. En primer lugar, utilizaría el cuadro redraw evento para saber cuándo se está redibujando el gráfico (por ejemplo, en un zoom). Luego, segundo, coloque explícitamente sus imágenes en las ubicaciones de interés del eje. Para obtener esas consultas directamente del DOM.

Usando jQuery:

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

Tendrán SVG "elemento de texto" niños con (x, y) posiciones.