Come potrei fare un tipo di grafico ad area in pila? [jQuery, Google Charts, ecc.]

Ho alcuni dati per i quali ho bisogno di creare un grafico. Il problema è che i dati hanno intervalli di prezzi. Alcuni di questi prezzi hanno qualche sovrapposizione tra loro. Inoltre, tutti gli intervalli di prezzo hanno limiti superiori e inferiori che non sono un valore zero.Come potrei fare un tipo di grafico ad area in pila? [jQuery, Google Charts, ecc.]

Ecco un'immagine di spiegare un po 'quello che è sto cercando di realizzare: enter image description here

ho cercato di trovare un grafico jQuery o Google Grafico che si adatta alle mie esigenze, ma sono stati finora in grado fare così. Ci sono alcune cose che sono vicine a ciò che sto cercando, per esempio grafici a gradini, ma hanno tutti requisiti come "nessun valore sovrapposto" o "inizia a zero". Stavo pensando di usare anche un grafico a candele, ma non puoi davvero differenziare le aree sovrapposte, che sono importanti per il mio set di dati.

È qualcosa che è disponibile? Sto solo cercando nei posti sbagliati? Grazie in anticipo per la vostra assistenza.

fonte

2012-06-11 Jim P

Sembra che tu voglia fare qualcosa di simile a visualizzare i dati delle serie meteo, che è quello che ho cercato di capire come fare le ultime ore.

Non posso dire che io sappia davvero come fare ciò che vuoi con Google Charts, ma la libreria su http://dygraphs.com/ sembra davvero sgargiante.

Dal sito web:

Stacked line graph.

fonte

2012-06-24 22:11:07 aendrew

devo un po 'expierence con questo tipo di grafici. Vedi per un esempio complesso my site. Una soluzione semplificata può essere codificata in questo modo:

<html> 
    <head> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load('visualization', '1', {packages: ['corechart']}); 
    </script> 
    <script type="text/javascript"> 
     function drawVisualization() { 
     // Fill data object, first row contains legend text, which in 
     // this example contains the calculation rules. 
     var data = google.visualization.arrayToDataTable([ 
      ['Month', 'min(Dataset1)', 'max(Dataset1)-min(Dataset1)', 
      'min(Dataset2)-max(Dataset1)', 'max(Dataset2)-min(Dataset2)', 
      'min(Dataset3)-max(Dataset2)', 'max(Dataset3)-min(Dataset3)'], 
      ['2004/05', 1, 2, 2, 2, 5,4], 
      ['2005/06', 2, 3, 1, 1, 3,3], 
      ['2006/07', 3, 4, 0, 2, 0,2], 
      ['2007/08', 3, 4, -1, 2, -5,2], 
      ['2008/09', 4, 4, -2, 3, -9,1] 
     ]); 

     // Create and draw the visualization. 
     var ac = new google.visualization.AreaChart(
     document.getElementById('visualization')); 
     ac.draw(data, { 
      isStacked: true, 
      chartArea:{left:"5%",top:"2%",width:"50%",height:"93%"}, 
      series: { 
      0:{color: 'transparent'}, 
      2:{color: 'transparent'}, 
      4:{color: 'transparent'}, 
      } 
     }); 
     } 
     google.setOnLoadCallback(drawVisualization); 
    </script> 
    </head> 
    <body> 
    <div id="visualization" style="width: 600px; height: 400px;"></div> 
    </body> 
</html>

Quello che facciamo nel codice sopra è duplicare il numero di serie. Ogni serie sarà preceduta da uno strato di serie trasparente che ha come altezza la distanza rispetto alla serie precedente.

Una schermata della soluzione semplificata: A screenshot of the simplified solution (code shown above)

Una schermata della soluzione complessa: A screenshot of the complex solution implemented on my site allepeilingen.com

fonte

2012-10-29 12:00:29 Ruut

Come potrei fare un tipo di grafico ad area in pila? [jQuery, Google Charts, ecc.]

risposta

Problemi correlati