Grafico con immagini a candele

Importante. La sezione Grafici immagine di Google Chart Tools è stata ufficialmente ritirata il 20 aprile 2012. Continuerà a funzionare in base alle nostre norme relative al ritiro.

  1. Panoramica
  2. Esempio
  3. Caricamento in corso…
  4. Formato dei dati
  5. Opzioni di configurazione
  6. Metodi
  7. Eventi
  8. Norme sui dati

Panoramica

Un grafico a candele visualizzato come immagine utilizzando l'API Google Profiles.

Un grafico a candele viene utilizzato per mostrare un valore di apertura e chiusura sovrapposto a una varianza totale. I grafici a candele vengono spesso utilizzati per mostrare il comportamento del valore delle azioni. In questo grafico, gli elementi in cui il valore di apertura è inferiore al valore di chiusura sono disegnati in verde, mentre gli elementi in cui il valore di apertura è superiore al valore di chiusura sono disegnati in rosso. Per ulteriori informazioni, consulta la documentazione relativa ai candele nell'API Google Listings.

Esempio

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagechart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var options = {};
        dataTable = google.visualization.arrayToDataTable([
          ['Gainers',10,30,45,60],
          ['Losers',20,35,25,45],
          ], true);

       var chart = new google.visualization.ImageCandlestickChart(document.getElementById('chart_div'));
       chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Caricamento in corso...

Il nome del pacchetto google.charts.load è "imagechart". 

  google.charts.load('current', {packages: [imagechart]});

Il nome della classe della visualizzazione è google.visualization.ImageCandlestickChart. 

  var visualization = new google.visualization.ImageCandlestickChart(container);

Formato dei dati

Cinque colonne, dove ogni riga descrive un singolo indicatore a candele:

  • Col 0: stringa utilizzata come etichetta per questo indicatore sull'asse X.
  • Col 1: numero che specifica il valore minimo/minimo dell'indicatore. Questa è la base della linea nera.
  • Col 2: numero che specifica il valore di apertura/iniziale dell'indicatore. Si tratta di un bordo verticale della candela. Se è inferiore al valore della colonna 3, la candela sarà verde, altrimenti sarà rossa.
  • Col 3: numero che specifica il valore di chiusura/finale dell'indicatore. Si tratta del secondo bordo verticale della candela. Se è inferiore al valore della colonna 2, la candela sarà rossa, altrimenti sarà verde.
  • Col 4: numero che specifica il valore massimo dell'indicatore. Questa è la parte superiore della linea nera.

Opzioni di configurazione

Oltre alle opzioni supportate dal Grafico immagine generico, il grafico a candele supporta le seguenti opzioni:

Nome Tipo Predefinita Descrizione
backgroundColor stringa '#FFFFFF' (bianco) Il colore di sfondo del grafico. Questa è una stringa #RRGGBB, incluso il segno #.
showAxisLines boolean true Indica se mostrare le linee degli assi. Se impostato su false, le etichette degli assi non verranno visualizzate.
altezza numero Altezza dell'elemento contenitore Altezza del grafico, in pixel. Se 30 < height o height > 1000,il valore predefinito sarà 200.
max numero Valore massimo dei dati Il valore massimo dell'asse Y.
min numero Valore minimo dei dati Il valore minimo dell'asse Y.
showCategoryLabels boolean true Se il valore è false, nasconde le etichette dell'asse X.
showValueLabels boolean true Se il valore è false, nasconde le etichette dell'asse Y.
showValueLabelsInternal numero Automatica La spaziatura tra le etichette dell'asse Y, in pixel.
title stringa " Testo da visualizzare sopra il grafico.
larghezza numero Larghezza dell'elemento contenitore Larghezza del grafico, in pixel. Se width è inferiore a 30 o maggiore di 1000, il valore width sarà impostato su 300.

Metodi

Metodo Tipo restituito Descrizione
draw(data, options) Nessuno Disegna il grafico.

Eventi

Puoi registrarti per ascoltare gli eventi descritti nella pagina Grafico immagini generico.

Norme sui dati

Consulta le norme di logging dell'API Chart.