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
Un grafico a barre che viene visualizzato come immagine utilizzando l'API Google Profiles.
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 in corso...
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ò seguire qualsiasi numero di colonne, tutte devono essere numeriche. Ogni colonna viene visualizzata come un insieme di barre. Quando la tabella di dati contiene più di una colonna numerica, i valori in una riga vengono visualizzati come barre in pila.
Opzioni di configurazione
Nome | Tipo | Predefinita | Descrizione |
---|---|---|---|
backgroundColor | stringa | '#FFFFFF' (bianco) | Il colore di sfondo del grafico nel formato colore API Chart. |
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. |
altezza | numero | Altezza container | Altezza del grafico in pixel. |
isStacked | boolean | true | Controlla se più colonne di dati verranno visualizzate come barre in pila (e non raggruppate). |
isVertical | boolean | false | Consente di stabilire se le barre saranno verticali. |
leggenda | stringa | "destra" | Posizione e tipo di legenda. Può corrispondere a uno dei seguenti:
|
max | numero | automatico | Il valore massimo da mostrare sull'asse Y. |
min | numero | automatico | Il valore minimo da mostrare sull'asse Y. |
showCategoryLabels | boolean | true | Se impostato su false, rimuove le etichette delle categorie. |
showValueLabels | boolean | true | Se impostato su false, rimuove le etichette dei valori. |
title | stringa | nessun titolo | Testo da visualizzare sopra il grafico. |
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 | 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
Consulta le norme di logging dell'API Chart.