highchart: añadir imágenes a la parte superior de la tabla en cada columna

Question

¿alguien sabe si es posible crear algo como esto en Highcharts:

Se trata de los iconos del tiempo en la parte superior. Los agregué como un "gráfico de dispersión" que es bueno, por lo que las imágenes/gráfico se pueden desactivar. Pero los quiero siempre en la cima. Por ejemplo: y = 20px o algo. ¿Es posible hacer esto con Highchart? Sé establecer sus datos a "30 celcius" pero eso ensuciaría el gráfico si la temperatura subiera a 30 grados.

Answer 1

Dado que Highcharts es solo SVG, siempre puede ir directamente y manipular el SVG para mostrar las imágenes que desea, generalmente con solo CSS. Puede inspeccionar el gráfico con el inspector web de Chrome y encontrar los elementos que desea diseñar. Sin embargo, debo advertirle que el hecho de haber personalizado diagramas de alto nivel en el pasado ha dificultado la actualización a las versiones más nuevas.

Answer 2

Puede utilizar un truco de tener dos ejes x, uno con imágenes y offset'ed a la parte superior de la tabla y el otro con las etiquetas habituales en la parte inferior:

xAxis: [{ 
    offset: -290, 
    tickWidth: 0, 
    lineWidth: 0, 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
    labels: { 
     x: 5, 
     useHTML: true, 
     formatter: function() { 
      return '<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;'; 
     } 
    } 
}, { 
    linkedTo: 0, 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
}], 

ejemplo completo en jsfiddle

Answer 3

Se puede agregar otro scatter parcela a su series que contiene específica markers: http://jsfiddle.net/ZZ7Kd/135/

Answer 4

Puede utilizar Renderer.image() para añadir imágenes en cualquier lugar de la tabla de

http://api.highcharts.com/highcharts#Renderer.image()

Answer 5

he encontrado una solución por casualidad debido a un código de registro se me olvidó quitar. Se puede acceder a los datos dentro del formateador método utilizando "este":

... 
plotOptions: { 
    series: { 
     dataLabels: { 
      useHTML: true, 
      enabled: true, 
      x: -50, 
      y: -50, 
      formatter: function(){ 
       console.log(this); 
       return '<span>'+this.y+'</span><br/>'+this.series+'<img src="'+this.key+'" />'; 
      }, 
     } 
    ... 

Este código de seguridad no está funcionando, pero que se ve la idea, ¿no? Espero que ayude!