Grafico dell'immagine a candela

Importante: la sezione relativa alle tabelle delle immagini di Google Chart Tools è stata ufficialmente ritirata a partire dal 20 aprile 2012. Continuerà a funzionare come previsto dalle nostre norme sul 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 che viene visualizzato come immagine utilizzando l'API di Google grafici.

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 il cui valore di apertura è inferiore al valore di chiusura vengono indicati in verde e gli elementi il cui valore di apertura è superiore al valore di chiusura vengono indicati in rosso. Per saperne di più, consulta la documentazione relativa alla candela nell'API Google Tables.

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

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 candela:

  • Col 0: stringa utilizzata come etichetta per questo indicatore sull'asse X.
  • Col 1: numero che specifica il valore basso/minimo di questo indicatore. Questa è la base della linea nera.
  • Col 2: numero che specifica il valore di apertura/iniziale di questo indicatore. Questo è 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. Questo è il secondo bordo verticale della candela. Se inferiore al valore della colonna 2, la candela sarà rossa, altrimenti diventerà verde.
  • Col 4: numero che specifica il valore massimo. Si tratta della parte superiore della linea nera.

Opzioni di configurazione

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

Nome Tipo Predefinito Descrizione
coloredisfondo string "#FFFFFF" (bianco) Il colore dello sfondo del grafico. Questa è una stringa #RRGGBB, che include il simbolo #.
lineeAxisShow boolean true Indica se mostrare le linee degli assi. Se impostato su false, le etichette dell'asse non verranno mostrate.
height number Altezza dell'elemento contenitore Altezza del grafico in pixel. Se 30 < height o altezza > 1.000,il valore predefinito sarà 200.
max number Valore dati massimo Il valore massimo dell'asse Y.
min number Valore dati minimo Il valore minimo dell'asse Y.
showCategoryLabel boolean true Se false, le etichette dell'asse X vengono nascoste.
showValueLabel boolean true Se false, le etichette dell'asse Y vengono nascoste.
showValueLabelInternal number Automatica La spaziatura tra le etichette dell'asse Y, in pixel.
title string ". Testo da visualizzare sopra il grafico.
width number Larghezza dell'elemento contenitore La larghezza del grafico in pixel. Se larghezza è minore di 30 o maggiore di 1.000, allora larghezza sarà impostata 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 immagine generico.

Norme sui dati

Fai riferimento alle norme di logging dell'API Chart.