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 słupkowy renderowany jako obraz za pomocą interfejsu 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:["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>
Wczytuję
Nazwa pakietu google.charts.load
to "imagebarchart"
google.charts.load("current", {packages: [[]"imagebarchart"]});
Nazwa klasy wizualizacji to google.visualization.ImageBarChart
var visualization = new google.visualization.ImageBarChart(container);
Format danych
Pierwsza kolumna powinna być ciągiem i powinna zawierać etykietę kategorii. Dalej można umieścić dowolną liczbę kolumn (wszystkie muszą mieć wartości liczbowe). Każda kolumna jest wyświetlana jako zestaw słupków. Jeśli tabela danych zawiera więcej niż jedną kolumnę numeryczną, wartości w wierszu są wyświetlane jako skumulowane paski.
Opcje konfiguracji
Nazwa | Typ | Domyślna | Opis |
---|---|---|---|
backgroundColor, | tekst | „#FFFFFF” (biały) | Kolor tła wykresu w formacie koloru interfejsu Chart API. |
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. |
Jest skumulowany | wartość logiczna | prawda | Określa, czy wiele kolumn danych ma być wyświetlanych jako skumulowane (w odróżnieniu od zgrupowanych). |
to branża | wartość logiczna | fałsz | Określa, czy słupki będą pionowe. |
legenda | tekst | „w prawo” | Pozycja i typ legendy. Dostępne wartości:
|
maks. | liczba | automatycznie | Maksymalna wartość wyświetlana na osi Y. |
minuta | liczba | automatycznie | Minimalna wartość wyświetlana na osi Y. |
Etykieta programu | wartość logiczna | prawda | Jeśli ma wartość Fałsz, etykiety kategorii są usuwane. |
Etykiety programu ShowValue | wartość logiczna | prawda | Jeśli ma wartość Fałsz, etykiety wartości są usuwane. |
tytuł | tekst | brak tytułu | Tekst do wyświetlenia nad wykresem. |
ValueLabelsInterval | liczba | Automatycznie | Odstęp czasowy między etykietami osi wartości. Jeśli na przykład min to 0, max to 100, a valueLabelsInterval to 20, na wykresie pojawią się etykiety osi (0, 20, 40, 60, 80 100). |
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.