Visualizzazione: grafico a linee (immagine)
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
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 linee 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:["imagelinechart"]});
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.ImageLineChart(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 è "imagelinechart".
google.charts.load('current', {packages: ['imagelinechart']});
Il nome della classe della visualizzazione è google.visualization.ImageLineChart.
var visualization = new google.visualization.ImageLineChart(container);
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 una riga separata.
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. |
| leggenda |
stringa |
"destra" |
Posizione e tipo di legenda. Può corrispondere a uno dei seguenti:
- "destra": a destra del grafico.
- "left": a sinistra del grafico.
- 'top' - Sopra il grafico.
- "bottom": sotto il grafico.
- "none": non viene visualizzata alcuna legenda.
|
| max |
numero |
automatico |
Il valore massimo da mostrare sull'asse Y. |
| min |
numero |
automatico |
Il valore minimo da mostrare sull'asse Y. |
| showAxisLines |
boolean |
true |
Se impostato su false, rimuove le linee e le etichette dell'asse. |
| showCategoryLabels |
boolean |
uguale a showAxisLines |
Se impostato su false, rimuove le etichette delle categorie (le etichette dell'asse X).
|
| showValueLabels |
boolean |
uguale a showAxisLines |
Se impostato su false, rimuove le etichette dei valori (le etichette dell'asse Y). |
| 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.
Salvo quando diversamente specificato, i contenuti di questa pagina sono concessi in base alla licenza Creative Commons Attribution 4.0, mentre gli esempi di codice sono concessi in base alla licenza Apache 2.0. Per ulteriori dettagli, consulta le norme del sito di Google Developers. Java è un marchio registrato di Oracle e/o delle sue consociate.
Ultimo aggiornamento 2024-07-10 UTC.
[null,null,["Ultimo aggiornamento 2024-07-10 UTC."],[],[],null,["# Visualization: Line Chart (Image)\n\n**Important:** The Image Charts portion of Google Chart Tools has been [officially deprecated](http://googledevelopers.blogspot.com/2012/04/changes-to-deprecation-policies-and-api.html) as of April 20, 2012. It will continue to work as per our [deprecation policy](/chart/terms). \n1. [Overview](#Overview)\n2. [Example](#Example)\n3. [Loading](#Loading)\n4. [Data Format](#Data_Format)\n5. [Configuration Options](#Configuration_Options)\n6. [Methods](#Methods)\n7. [Events](#Events)\n8. [Data Policy](#Data_Policy)\n\nOverview\n--------\n\n\nA line chart that is rendered as an image using the [Google Charts API](/chart/image/docs/gallery/line_charts).\n\nExample\n-------\n\n\\\u003cscript type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"\\\u003e\\\u003c/script\\\u003e \\\u003cscript type=\"text/javascript\"\\\u003e google.charts.load('current', {'packages':\\['imagelinechart'\\]}); \\\u003c/script\\\u003e \\\u003cdiv id=\"chart_div\" style=\"width: 400px; height: 240px;\"\\\u003e\\\u003c/div\\\u003e 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.ImageLineChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, min: 0}); } \n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003cscript type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"\u003e\u003c/script\u003e\n \u003cscript type=\"text/javascript\"\u003e\n google.charts.load(\"current\", {packages:[\"imagelinechart\"]});\n google.charts.setOnLoadCallback(drawChart);\n\n function drawChart() {\n var data = google.visualization.arrayToDataTable([\n ['Year', 'Sales', 'Expenses'],\n ['2004', 1000, 400],\n ['2005', 1170, 460],\n ['2006', 660, 1120],\n ['2007', 1030, 540]\n ]);\n\n var chart = new google.visualization.ImageLineChart(document.getElementById('chart_div'));\n\n chart.draw(data, {width: 400, height: 240, min: 0});\n }\n \u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id=\"chart_div\" style=\"width: 400px; height: 240px;\"\u003e\u003c/div\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\nLoading\n-------\n\n\nThe `google.charts.load` package name is `\"imagelinechart\"`. \n\n```gdscript\n google.charts.load('current', {packages: ['imagelinechart']});\n```\n\n\nThe visualization's class name is `google.visualization.ImageLineChart`. \n\n```gdscript\n var visualization = new google.visualization.ImageLineChart(container);\n```\n\nData Format\n-----------\n\n\nThe first column should be a string, and contain the category label.\nAny number of columns can follow, all must be numeric.\nEach column is displayed as a separate line.\n\nConfiguration Options\n---------------------\n\n| Name | Type | Default | Description |\n|---------------------|-----------------|-----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| backgroundColor | string | '#FFFFFF' (white) | The background color for the chart in the [Chart API color format](/chart/image/docs/chart_params#gcharts_rgb). |\n| colors | Array\\\u003cstring\\\u003e | Auto | Use this to assign specific colors to each data series. Colors are specified in the [Chart API color format](/chart/image/docs/chart_params#gcharts_rgb). Color i is used for data column i, wrapping around to the beginning if there are more data columns than colors. If variations of a single color is acceptable for all series, use the `color` option instead. |\n| enableEvents | boolean | false | Causes charts to throw user-triggered events such as click or mouse over. Supported only for specific chart types. See [Events](#Events) below. |\n| height | number | Container's height | Height of the chart in pixels. |\n| legend | string | 'right' | Position and type of legend. Can be one of the following: - 'right' - To the right of the chart. - 'left' - To the left of the chart. - 'top' - Above the chart. - 'bottom' - Below the chart. - 'none' - No legend is displayed. |\n| max | number | automatic | The maximal value to show in the Y axis. |\n| min | number | automatic | The minimal value to show in the Y axis. |\n| showAxisLines | boolean | true | If set to false, removes axis lines and labels. |\n| showCategoryLabels | boolean | same as showAxisLines | If set to false, removes the labels of the categories (the X axis labels). |\n| showValueLabels | boolean | same as showAxisLines | If set to false, removes the labels of the values (the Y axis labels). |\n| title | string | no title | Text to display above the chart. |\n| valueLabelsInterval | number | Auto | The interval at which to show value axis labels. For example, if `min` is 0, `max` is 100, and `valueLabelsInterval` is 20, the chart will show axis labels at (0, 20, 40, 60, 80 100). |\n| width | number | Container's width | Width of the chart in pixels. |\n\nMethods\n-------\n\n| Method | Return Type | Description |\n|-----------------------|-------------|------------------|\n| `draw(data, options)` | none | Draws the chart. |\n\nEvents\n------\n\nYou can register to hear the events described on the [Generic\nImage Chart](/chart/interactive/docs/gallery/genericimagechart#Events) page.\n\nData Policy\n-----------\n\n\nPlease refer to the [Chart API logging policy](/chart/interactive/faq#logging)."]]
