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 liniowy 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:["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>
Wczytuję
Nazwa pakietu google.charts.load
to "imagelinechart"
.
google.charts.load('current', {packages: ['imagelinechart']});
Nazwa klasy wizualizacji to google.visualization.ImageLineChart
.
var visualization = new google.visualization.ImageLineChart(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 w osobnym wierszu.
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. |
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. |
liniaAxisLine | wartość logiczna | prawda | Jeśli ma wartość Fałsz, linie osi i etykiety są usuwane. |
Etykieta programu | wartość logiczna | to samo co showAxisLines | Jeśli ma wartość Fałsz, etykiety kategorii są usuwane (etykiety osi X). |
Etykiety programu ShowValue | wartość logiczna | to samo co showAxisLines | Jeśli ma wartość Fałsz, etykiety wartości są usuwane (etykiety osi Y). |
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.