Visualizzazione: grafico immagine generico

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.

Panoramica

Il grafico immagine generica è un wrapper generico per tutti i grafici prodotti dall'API Google Chart. Leggi la documentazione dell'API Chart prima di provare a utilizzare questa visualizzazione. Tieni presente che con questa visualizzazione puoi inviare fino a 16.000 dati, a differenza del limite di 2.000 nelle chiamate dirette all'API Chart.

Tutti i dati vengono passati ai grafici utilizzando una tabella o un oggetto DataView. Inoltre, alcune etichette vengono passate come colonne nella tabella dati.

Tutti gli altri parametri URL dell'API Chart (tranne chd) vengono trasmessi come opzioni.

Di: Google

Esempi

Di seguito sono riportati alcuni esempi di vari tipi di grafici.

Grafico a linee

<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"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addColumn('string');

        // Row data is [chl, data point, point label]
        dataTable.addRows([
        ['January',40,undefined],
        ['February',60,'Initial recall'],
        ['March',60,'Product withdrawn'],
        ['April',45,undefined],
        ['May',47,'Relaunch'],
        ['June',75,undefined],
        ['July',70,undefined],
        ['August',72,undefined]
        ]);

        var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};

        var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='line_div'></div>
  </body>
</html>

Grafico a barre verticali

Tieni presente che nei grafici a barre con wrapping, non è necessario specificare chxt='x' come faresti se chiami personalmente il grafico; se non specifichi un asse, il grafico con immagini generiche tenta di configurare correttamente il grafico per impostazione predefinita.

<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"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
          chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};

        var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='bar_div'></div>
  </body>
</html>

Grafico a torta

<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"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['January',12],
          ['February',8],
          ['March',3]
        ]);

        var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
          colors:['#3399CC','#00FF00','#0000FF']};

        var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='pie_div'></div>
  </body>
</html>

Grafico radar

<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"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [100,10],
          [80,20],
          [60,30],
          [30,40],
          [25,50],
          [20,60],
          [10,70]
        ]);

        var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));

        var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='radar_div'></div>
  </body>
</html>

Grafico mappa

<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"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['DZ',0],
          ['EG',50],
          ['MG',50],
          ['GM',35],
          ['KE',100],
          ['ZA',100]
        ]);

        var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
        var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
<body>
    <div id='map_div'></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.ImageChart

  var visualization = new google.visualization.ImageChart(container_div);

Formato dei dati

Esistono due formati di dati generalizzati: uno per i grafici a mappa e uno per tutti gli altri. Tieni presente che l'unico formato numerico supportato per i dati è il tipo di numero JavaScript.

Nota: non eseguire la codifica URL per i valori delle stringhe trasmessi come dati o opzioni.

Grafici della mappa

Un grafico mappa accetta una tabella di dati con due colonne obbligatorie:

Per ulteriori informazioni, consulta la documentazione relativa ai grafici a mappa.

Grafici non mappa

I grafici non a mappa utilizzano una tabella di dati con due colonne facoltative (una all'inizio e una alla fine) e una o più colonne intermedie:

  • Prima colonna: [facoltativa, stringa] Ogni voce rappresenta un'etichetta utilizzata sull'asse X (equivalente al parametro chl o chxl) per i grafici che la supportano.
  • Colonne successive: qualsiasi numero di colonne numeriche, ciascuna delle quali rappresenta una serie di dati.
  • Ultime colonne - [facoltativo, stringa] Un numero qualsiasi di colonne stringa dopo le colonne di dati, dove ogni voce rappresenta un'etichetta del punto dati per i grafici che la supportano. Se vuoi utilizzare questa colonna, devi specificare l'opzione annotationColumns.

I dati verranno visualizzati in modi diversi a seconda del tipo di grafico. Consulta la documentazione del grafico.

Una nota sugli indici di colonna: la visualizzazione Grafico immagine generico rimuove colonne stringa dalla tabella di dati prima di inviarla al servizio API Chart. Di conseguenza, gli indici di colonna nelle opzioni, nei metodi e negli eventi definiti in questa pagina includono le colonne di stringhe nel conteggio degli indici. Tuttavia, gli indici di colonna in qualsiasi opzione gestita dal servizio API Chart (ad esempio, l'opzione chm) ignorano le colonne stringa nel conteggio degli indici.

Opzioni di configurazione

Per questa visualizzazione sono definite le seguenti opzioni. Definiscile nell'oggetto opzioni passato nel metodo draw() della visualizzazione. Non tutte le opzioni seguenti sono supportate per tutti i tipi di grafici; consulta la documentazione per il tuo tipo di grafico con immagini statiche. Puoi passare qualsiasi parametro URL dell'API Chart come opzione. Ad esempio, il parametro URL chg=50,50 di una visualizzazione grafico verrebbe specificato in questo modo: options['chg'] = '50,50'.

Una nota sui colori: le opzioni di colore come colors, color e backgroundColor sono specificate nel formato colore API Chart. Questo formato è simile al formato #RRGGBB, tranne per il fatto che include un quarto numero esadecimale facoltativo per indicare la trasparenza. Non sono supportati colori leggibili da persone, come "rosso", "verde", "blu" e così via. Il formato colore dell'API Chart non include il simbolo # iniziale, ma le opzioni di visualizzazione generiche dei grafici di immagini accetteranno codici colore con o senza il simbolo #.

Nome Tipo Predefinita Descrizione
annotationColumns Array<object> Nessuno

Etichette dei punti dati per vari tipi di grafici. È un array di oggetti, ognuno dei quali assegna un'etichetta formattata a un punto dati sul grafico. Questa opzione è disponibile solo per i grafici che supportano punti dati (consulta l'argomento collegato per scoprire quali) e la tabella di dati deve avere almeno una delle colonne delle etichette di stringa.

Ogni oggetto nell'array ha le seguenti proprietà:

  • column [numero] - L'indice in base zero della colonna che contiene il testo utilizzato nell'annotazione. Non è necessario un valore in ogni riga di questa colonna.
  • positionColumn [numero] - L'indice in base zero della colonna che contiene il punto dati da etichettare. L'impostazione predefinita è la prima colonna di dati.
  • color [string] - Il colore del testo dell'annotazione nel formato colore API Chart. Il valore predefinito è "#000000" (nero).
  • size [numero] - La dimensione del carattere dell'annotazione, in pixel.
  • priority [string] - Può essere "bassa", "media" o "alta", specificando il livello in cui deve essere disegnata l'etichetta. Il valore predefinito è "medium", che specifica che l'etichetta viene disegnata dopo barre e linee, ma prima di altre etichette.
  • type [string] - Può essere "text" o "flag". "text" crea un'annotazione in testo normale, mentre "flag" crea un'annotazione con un fumetto.

Esempio : questo snippet definisce un'etichetta di testo nera di 12 pixel, con testo proveniente dalla colonna 0 e assegnata al punto dati nella colonna 2 della stessa riga: options['annotationColumns'] = [{column: 2, positionColumn: 0, color: '#000000', size: '12', priority: 'high', type: 'text'}];

backgroundColor stringa '#FFFFFF' (bianco) Il colore di sfondo del grafico nel formato colore API Chart.
color stringa Auto Specifica un colore di base da utilizzare per tutte le serie. Ogni serie avrà una gradazione del colore specificato. I colori vengono specificati nel formato dei colori dell'API Chart. Ignorato se viene specificato colors.
colori Array<stringa> Auto Utilizza questa opzione per assegnare colori specifici a ogni serie di dati. I colori sono specificati nel formato dei colori dell'API Chart. Il colore i viene utilizzato per la colonna di dati i, passando all'inizio se ci sono più colonne di dati che colori. Se le variazioni di un singolo colore sono accettabili per tutte le serie, utilizza invece l'opzione color.
enableEvents boolean false Consente ai grafici di generare eventi attivati dall'utente, come clic o mouse sopra. Supportata solo per tipi di grafici specifici. Consulta la sezione Eventi riportata di seguito.
fill boolean false Se true, compila l'area sotto ogni riga. Disponibile solo per i grafici a linee.
firstHiddenColumn numero Nessuno

Un indice di colonna di dati. La colonna elencata, così come tutte le colonne seguenti, non verranno utilizzate per disegnare gli elementi principali delle serie di grafici (ad esempio linee in un grafico a linee o barre in un grafico a barre), ma come dati per indicatori e altre annotazioni. Tieni presente che le colonne di tipo stringa sono incluse nel conteggio degli indici.

altezza numero 200 Altezza del grafico, in pixel. Se mancante o non rientra in un intervallo accettabile, viene utilizzata l'altezza dell'elemento contenitore. Se anche questo è al di fuori dell'intervallo accettabile, verrà utilizzata l'altezza predefinita.
etichette stringa "nessuno"

[Solo grafico a torta] L'etichetta, se presente, da mostrare per ogni sezione. Scegli tra i seguenti valori:

  • "nessuno": nessuna etichetta.
  • "value" - Mostra il valore della sezione come etichetta.
  • "name" - Mostra il nome della sezione (il nome della colonna) come etichetta.
leggenda stringa "destra" Dove visualizzare una legenda del grafico in relazione al grafico. Specifica una delle seguenti opzioni: "top", "bottom", "left", "right", "none". Ignorato nei grafici che non includono legende (come i grafici delle mappe).
max numero Valore massimo dei dati Il valore massimo mostrato sulla bilancia. Ignorato per i grafici a torta. Il valore predefinito è il valore massimo dei dati, ad eccezione dei grafici a barre, in cui il valore predefinito è il valore massimo dei dati. Questo valore viene ignorato per i grafici a barre quando la tabella ha più di una colonna di dati.
min numero Valore dei dati minimo Il valore minimo mostrato sulla bilancia. Ignorato per i grafici a torta. Il valore predefinito è il valore minimo dei dati, tranne che per i grafici a barre, dove il valore predefinito è zero. Questo valore viene ignorato per i grafici a barre quando la tabella ha più di una colonna di dati.
showCategoryLabels boolean true Indica se le etichette devono essere visualizzate sull'asse delle categorie (ovvero, riga). Disponibile solo per i grafici a linee e a barre.
showValueLabels boolean true True visualizza un'etichetta sull'asse dei valori. Disponibile solo per i grafici a linee e a barre.
singleColumnDisplay numero Nessuno Visualizza solo la colonna di dati specificata. Questo numero è un indice in base zero nella tabella, dove zero è la prima colonna di dati. Il colore assegnato alla singola colonna è lo stesso di quando viene eseguito il rendering di tutte le colonne. Non può essere utilizzato con grafici a torta o a mappa.
title stringa Stringa vuota Il titolo del grafico. Se non specificato, non verrà visualizzato alcun titolo. Il parametro del grafico equivalente è chtt.
valueLabelsInterval numero Auto L'intervallo in cui visualizzare le etichette dell'asse dei valori. Ad esempio, se min è 0, max è 100 e valueLabelsInterval è 20, il grafico mostrerà le etichette degli assi su (0, 20, 40, 60, 80 100).
larghezza numero 400 Larghezza del grafico, in pixel. Se mancante o non rientra in un intervallo accettabile, viene utilizzata la larghezza dell'elemento contenitore. Se anche questo è al di fuori dell'intervallo accettabile, verrà utilizzata la larghezza predefinita.

Metodi

Metodo Tipo restituito Descrizione
draw(data, options) Nessun valore Disegna la mappa.
getImageUrl() String Restituisce l'URL dell'API Google Chart utilizzato per richiedere il grafico. Tieni presente che questo campo può contenere più di 2000 caratteri. Per ulteriori informazioni, consulta l'API Google Chart.

Eventi

Se imposti la proprietà enableEvents su true, i grafici di supporto genereranno eventi per gli eventi utente elencati nella tabella seguente. Tutti questi eventi restituiscono un oggetto event con le seguenti proprietà:

  • type: una stringa che rappresenta il tipo di evento.
  • region: un ID della regione interessata. Aggiungi il parametro chof=json al tipo di grafico non elaborato per visualizzare un elenco dei nomi disponibili. Consulta chof=json per ulteriori dettagli.
Nome Descrizione type Valore
error Attivato quando si verifica un errore durante il tentativo di rendering del grafico. id, messaggio
onmouseover Attivato quando l'utente passa il mouse sopra un elemento del grafico. "mouseover"
onmouseout Attivato quando l'utente allontana il mouse dall'elemento del grafico. "mouseout"
onclick Attivato quando un utente fa clic su un elemento del grafico.

"fai clic"

Quali grafici supportano gli eventi?

Tutti i grafici che supportano il parametro chof=json supportano la generazione di eventi, ovvero tutti i grafici tranne i grafici speciali, ad esempio i codici QR.

Esempio di gestione degli eventi

Ecco un esempio che mostra una barra che registra i clic del mouse.

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;  charset=utf-8"/>
    <title>
       Google Image Events Sample
    </title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['imagechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht:  'bvs', chs: '300x125',  colors:['#4D89F9','#C6D9FD'],
                       chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};

        var chart = new  google.visualization.ImageChart(document.getElementById('visualization'));
        chart.draw(dataTable, options);

        // Assign  event  handler
        google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
      }

      google.charts.setOnLoadCallback(drawVisualization);

      // Define an event handler
      function mouseEventHandler(event)  {
        document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
      }

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 300px;"></div>
    <div id="debugger"></div>
  </body>
</html>

Norme sui dati

I dati vengono inviati al servizio API Google Chart.

Localizzazione

Questa visualizzazione supporta qualsiasi localizzazione supportata dal servizio Google Chart.