Ważne: 20 kwietnia 2012 r. część Grafiki na wykresach została oficjalnie wycofana. Będzie nadal działać zgodnie z naszymi zasadami wycofywania.
Omówienie
Wykres kołowy, który jest renderowany jako obraz za pomocą Google Charts API.
Przykład
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["imagepiechart"]}); 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'}); } </script> </head> <body> <div id="chart_div" style="width: 400px; height: 240px;"></div> </body> </html>
Wczytuję
Nazwa pakietu google.charts.load
to "imagepiechart"
:
google.charts.load('current', {packages: ['imagepiechart']});
Nazwa klasy wizualizacji to google.visualization.ImagePieChart
var visualization = new google.visualization.ImagePieChart(container);
Format danych
Dwie kolumny. Pierwsza kolumna powinna być ciągiem i powinna zawierać etykietę wycinka. Druga kolumna powinna być liczbą i powinna zawierać wartość wycinka.
Opcje konfiguracji
W ramach obiektu option przekazywanego w metodzie draw()
wizualizacji można podać następujące opcje.
Nazwa | Typ | Domyślna | Opis |
---|---|---|---|
backgroundColor, | tekst | „#FFFFFF” (biały) | Kolor tła wykresu w formacie koloru interfejsu Chart API. |
kolor | tekst | Automatycznie | Określa kolor podstawowy, który ma być używany w przypadku wszystkich serii. Każda seria będzie gradacją wybranego koloru. Kolory są określane w formacie koloru Chart API.
Ignorowane, jeśli określono właściwość colors . |
kolory | Tablica<string> | Automatycznie | Użyj tej opcji, aby przypisać konkretne kolory do każdej serii danych. Kolory są określane w formacie koloru interfejsu Chart API.
Kolor i jest używany w kolumnie danych i, a jeśli jest więcej kolumn danych niż kolory, dochodzi do początku. Jeśli wszystkie wersje jednego koloru są dopuszczalne dla wszystkich serii, użyj opcji color . |
włączanie zdarzeń | wartość logiczna | fałsz | Powoduje, że wykresy powodują zdarzenia wywoływane przez użytkowników, takie jak kliknięcie lub przesunięcie kursora myszy. Obsługiwane tylko w przypadku określonych typów wykresów. Patrz Wydarzenia poniżej. |
wysokość | liczba | Wysokość kontenera | Wysokość wykresu w pikselach. |
is3D | wartość logiczna | fałsz | Jeśli ma wartość Prawda, wyświetla trójwymiarowy wykres. |
etykiety | tekst | „brak” | Etykieta (jeśli jest widoczna) dla każdego wycinka. Wybierz jedną z tych wartości:
|
legenda | tekst | „w prawo” | Lokalizacja legendy na wykresie. Wybierz jedną z następujących wartości: „top”, „bottom”, „left”, „right” lub „none”. |
tytuł | tekst | brak tytułu | Tekst do wyświetlenia nad wykresem. |
szerokość | liczba | Szerokość kontenera | Szerokość wykresu w pikselach. |
Metody
Metoda | Typ zwracanej wartości | Opis |
---|---|---|
draw(data, options) |
brak | Rysuje wykres. |
Zdarzenia
Możesz zarejestrować się, by usłyszeć zdarzenia opisane na stronie Ogólny wykres graficzny.
Zasady dotyczące danych
Więcej informacji znajdziesz w zasadach rejestrowania interfejsu Chart API.