Il nome della classe della visualizzazione è google.visualization.ImagePieChart
var visualization = new google.visualization.ImagePieChart(container);
Formato dei dati
Due colonne.
La prima colonna deve essere una stringa e contenere l'etichetta della sezione.
La seconda colonna deve essere un numero e contenere il valore della sezione.
Opzioni di configurazione
Puoi specificare le seguenti opzioni come parte dell'oggetto options passato nel metodo draw() della visualizzazione.
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.
altezza
numero
Altezza container
Altezza del grafico in pixel.
è in 3D
boolean
false
Se impostato su true, consente di visualizzare un grafico tridimensionale.
etichette
stringa
"nessuno"
L'etichetta, se presente, da mostrare per ogni sezione. Scegli tra i seguenti valori:
"nessuno": nessuna etichetta.
"value" - Utilizza il valore della sezione come etichetta.
"name" - Utilizza il nome della sezione (il nome della colonna).
leggenda
stringa
"destra"
La posizione della legenda sul grafico. Scegli uno dei seguenti valori: "top", "bottom", "left", "right", "none".
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2024-07-10 UTC."],[],[],null,["# Visualization: Pie 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 pie chart that is rendered as an image using the [Google Charts API](/chart/image/docs/gallery/pie_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':\\['imagepiechart'\\]}); \\\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(\\[ \\['Task', 'Hours per Day'\\], \\['Work', 11\\], \\['Eat', 2\\], \\['Commute', 2\\], \\['Watch TV', 2\\], \\['Sleep', 7\\] \\]); var chart = new google.visualization.ImagePieChart(document.getElementById('chart_div')); chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'}); } \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:[\"imagepiechart\"]});\n google.charts.setOnLoadCallback(drawChart);\n\n function drawChart() {\n var data = google.visualization.arrayToDataTable([\n ['Task', 'Hours per Day'],\n ['Work', 11],\n ['Eat', 2],\n ['Commute', 2],\n ['Watch TV', 2],\n ['Sleep', 7]\n ]);\n\n var chart = new google.visualization.ImagePieChart(document.getElementById('chart_div'));\n\n chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});\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 `\"imagepiechart\"`: \n\n```gdscript\n google.charts.load('current', {packages: ['imagepiechart']});\n```\n\n\nThe visualization's class name is `google.visualization.ImagePieChart` \n\n```gdscript\n var visualization = new google.visualization.ImagePieChart(container);\n```\n\nData Format\n-----------\n\n\nTwo columns.\nThe first column should be a string, and contain the slice label.\nThe second column should be a number, and contain the slice value.\n\nConfiguration Options\n---------------------\n\nYou can specify the following options as part of the *options* object passed into\nthe visualization's `draw()` method.\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| color | string | Auto | Specifies a base color to use for all series; each series will be a gradation of the color specified. Colors are specified in the [Chart API color format](/chart/image/docs/chart_params#gcharts_rgb). Ignored if `colors` is specified. |\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| is3D | boolean | false | If set to true, displays a three-dimensional chart. |\n| labels | string | 'none' | What label, if any, to show for each slice. Choose from the following values: - 'none' - No labels. - 'value' - Use the slice value as a label. - 'name' - Use the slice name (the column name). |\n| legend | string | 'right' | The location of the legend on the chart. Choose from one of the following values: 'top', 'bottom', 'left', 'right', 'none'. |\n| title | string | no title | Text to display above the chart. |\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)."]]
