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.
Panoramica
Un grafico a barre visualizzato come immagine utilizzando l'API di Google grafici.
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:["imagebarchart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var chart = new google.visualization.ImageBarChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, min: 0}); } </script> </head> <body> <div id="chart_div" style="width: 400px; height: 240px;"></div> </body> </html>
Caricamento
Il nome del pacchetto google.charts.load
è "imagebarchart"
google.charts.load("current", {packages: [[]"imagebarchart"]});
Il nome della classe della visualizzazione è google.visualization.ImageBarChart
var visualization = new google.visualization.ImageBarChart(container);
Formato dei dati
La prima colonna deve essere una stringa e contenere l'etichetta della categoria. Può essere seguito da un numero qualsiasi di colonne, tutte numeriche. Ogni colonna viene visualizzata come un insieme di barre. Quando la tabella dati contiene più di una colonna numerica, i valori di una riga vengono visualizzati come barre in pila.
Opzioni di configurazione
Nome | Tipo | Predefinito | Descrizione |
---|---|---|---|
coloredisfondo | string | "#FFFFFF" (bianco) | Il colore dello sfondo del grafico nel formato colore dell'API Chart. |
colori | Array<string> | Automatica | Utilizzalo per assegnare colori specifici a ogni serie di dati. I colori sono specificati nel formato colore dell'API Chart.
Il colore i viene utilizzato per la colonna dati i, che torna all'inizio se sono presenti più colonne dati di colori. Se le varianti di un singolo colore sono accettabili per tutte le serie, utilizza invece l'opzione color . |
abilitareEventi | boolean | false | Di conseguenza, i grafici generano eventi attivati dagli utenti, come clic o clic del mouse. Supportato solo per tipi di grafici specifici. Vedi Eventi di seguito. |
height | number | Altezza del container | Altezza del grafico in pixel. |
in pila | boolean | true | Stabilisce se vengono visualizzate più colonne di dati come barre in pila (anziché raggruppate). |
Verticale | boolean | false | Consente di stabilire se le barre devono essere verticali. |
leggenda | string | "a destra" | Posizione e tipo di legenda. Può corrispondere a uno dei seguenti:
|
max | number | automatico | Il valore massimo da mostrare nell'asse Y. |
min | number | automatico | Il valore minimo da mostrare sull'asse Y. |
showCategoryLabel | boolean | true | Se impostato su false, le etichette delle categorie vengono rimosse. |
showValueLabel | boolean | true | Se impostato su false, le etichette dei valori vengono rimosse. |
title | string | nessun titolo | Testo da visualizzare sopra il grafico. |
valueLabelInterval | number | Automatica | L'intervallo con cui mostrare le etichette dell'asse del valore. Ad esempio, se min è 0, max è 100 e valueLabelsInterval è 20, il grafico mostrerà le etichette dell'asse a (0, 20, 40, 60, 80 100). |
width | number | Larghezza del container | Larghezza del grafico in pixel. |
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.