highchart: aggiungere immagini superiore del grafico su ogni colonna

Question

qualcuno sa se è possibile creare qualcosa di simile in Highcharts:

È circa le icone del tempo sulla parte superiore. Li ho aggiunti come un "grafico a dispersione" che è bello, quindi le immagini/grafici possono essere disabilitate. Ma li voglio sempre al top. Ad esempio: y = 20px o qualcosa del genere. È possibile farlo con Highchart? So che impostare i loro dati su "30 celcius", ma ciò farebbe confondere il grafico se la temperatura salisse a 30 gradi.

Answer 1

Dato che i grafici alti sono solo SVG puoi sempre andare direttamente e manipolare l'SVG per mostrare le immagini che vuoi, di solito con solo CSS. Puoi ispezionare il grafico con l'ispettore web di Chrome e trovare gli elementi che desideri modellare. Devo avvisarti che, avendo io stesso fatto dei diagrammi elevati personalizzati in passato, ho reso difficile l'aggiornamento a nuove versioni.

Answer 2

È possibile utilizzare un trucco di avere due assi X, uno con immagini e offset'ed all'inizio del grafico e uno con le solite etichette in basso:

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'] 
}], 

esempio completo su jsfiddle

Answer 3

È possibile aggiungere un altro scatter complotto per il vostro series che contiene specifici markers: http://jsfiddle.net/ZZ7Kd/135/

Answer 4

È possibile utilizzare Renderer.image() per aggiungere le immagini in qualsiasi luogo sul grafico

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

Answer 5

ho trovato una soluzione per caso a causa di un codice di registrazione ho dimenticato di rimuovere. È possibile accedere ai dati all'interno del metodo di formattazione con "questo":

... 
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+'" />'; 
      }, 
     } 
    ... 

Questo codice di certo non funziona, ma mostra l'idea, non è vero? Spero che aiuti!