Grafici elevati: mostra un indicatore speciale sul grafico delle colonne

Question

Voglio mettere i marcatori su un istogramma.

Per essere precisi, il grafico è un per le corse segnate in ciascuna di esse nel gioco del cricket. (Un campione generato grafico fin d'ora: http://img839.imageshack.us/img839/6091/screenshot20111117at124.png)

Ora quello che realmente voglio è mostrare in cui oltre il wicket è caduto (qualcosa come: http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Dudley_Nourse_Graph.png/350px-Dudley_Nourse_Graph.png), i punti blu in cima alle colonne.

È possibile eseguire questo in highcharts? Vedo un frammento di questo in questo grafico (qualcosa come il sole raffigurato qui: http://www.highcharts.com/demo/spline-symbols).

Answer 1

Nella data matrice è possibile specificare le opzioni per un particolare punto (come ad esempio un marcatore personalizzato per mostrare):

[...] 
series: [{ 
     name: 'Tokyo', 
     marker: { 
      symbol: 'square' 
     }, 
     data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, /* HERE >>> */{ 
      y: 26.5, 
      marker: { 
       symbol: 'url(/demo/gfx/sun.png)' 
      } 
     }, 23.3, 18.3, 13.9, 9.6] 

     }, 
[...] 

Comunque non credo che sia possibile mettere il marcatore sopra l'elemento grafico.

http://www.highcharts.com/ref/#point-marker

Answer 2

ho avuto una sfida simile, in cui avevo bisogno di mettere le icone specifiche sulla parte superiore delle mie colonne:

Per raggiungere questo obiettivo, ho usato la formatter callback:

plotOptions: { 
    column: { 
    dataLabels: { 
     enabled: true, 
     useHTML: true, 
     formatter: function() { 
     return '<div style="text-align:center"><div>' + this.y + '</div><div class="dynamic-class-' + this.series.name.toLowerCase() +'"><img src="/path/to/special/icon"></div></div>'; 
     }, 
     y: 0 
    } 
    } 
} 

Come puoi vedere, puoi impostare dinamicamente un percorso immagine o una classe di elementi basata su atever il tuo x/y/serie/punto/totale/valore percentuale è.

Infine, è anche necessario aumentare la maxPadding per il yAxis, altrimenti i icone/valori saranno tagliate (a seconda della dimensione delle icone, ovviamente).

Per vederlo in azione con alcune immagini 'dinamiche' segnaposto, date un'occhiata a questo jsFiddle: http://jsfiddle.net/DMCXS/

Answer 3

È possibile utilizzare due serie, prima colonna, e la seconda a dispersione con pennarello personalizzato.

Esempio: http://jsfiddle.net/NDpu6/

series: [{ 
      name: 'Tokyo', 
      type:'column', 
      data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 

     }, { 
      name: 'New York', 
      type: 'scatter', 
      data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 

     }]