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
Jeden lub kilka miniwykresów renderowanych za pomocą obrazów przy użyciu interfejsu Google Charts API. Obrazy są zawarte w tabeli HTML.
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:["imagesparkline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Revenue', 'Licenses'], [435, 132], [438, 131], [512, 137], [460, 142], [491, 140], [487, 139], [552, 147], [511, 146], [505, 151], [509, 149] ]); var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div')); chart.draw(data, {width: 120, height: 40, showAxisLines: false, showValueLabels: false, labelPosition: 'left'}); } </script> </head> <body> <div id="chart_div" style="width: 120px; height: 40px;"></div> </body> </html>
Wczytuję
Nazwa pakietu google.charts.load
to "imagesparkline"
.
google.charts.load("current", {packages: ["imagesparkline"]});
Nazwa klasy wizualizacji to google.visualization.ImageSparkLine
.
var visualization = new google.visualization.ImageSparkLine(container);
Format danych
Dowolna liczba kolumn. Wszystkie kolumny powinny zawierać liczby. Każda kolumna jest wyświetlana jako pojedynczy wykres.
Opcje konfiguracji
Nazwa | Typ | Domyślna | Opis |
---|---|---|---|
kolor | tekst | Określa kolor używany we wszystkich wykresach.
Ciąg w formacie #rrggbb. Na przykład: „#00cc00”.
Używana tylko wtedy, gdy nie określono opcji colors . |
|
kolory | Tablica ciągów znaków | Kolory domyślne | Kolory kolumn danych. Tablica ciągów znaków, w których każdy element to ciąg w formacie #rrggbb. Na przykład: „#00cc00”. Kolor i jest używany w kolumnie danych i. Jeśli liczba kolorów jest mniejsza niż liczba kolumn, wybór koloru zostanie ujęty wokół siebie. |
fill | wartość logiczna | fałsz | Jeśli wybrano opcję prawda, kolor będzie wypełniać obszar pod linią. |
wysokość | liczba | Wysokość kontenera | Wysokość obrazów w pikselach. |
Pozycja etykiety | tekst | brak | Pozycja etykiet. Obsługiwane wartości to „none”, „left”, „right”. |
maks. | Tablica liczb | Maksymalna wartość danych dla miniwykresu | Najwyższa wartość zakresu danych na miniwykresie. Indeks w tablicy musi być zgodny z indeksem kolumny w tabeli danych. Jeśli wszystkie wartości mają wartość null, będzie to maksymalna wartość w serii. |
minuta | Tablica liczb | Minimalna wartość danych każdej miniwykresu | Najniższa wartość zakresu danych na miniwykresie. Indeks w tablicy musi być zgodny z indeksem kolumny w tabeli danych. Jeśli wszystkie wartości są puste, jest to minimalna wartość w serii. |
liniaAxisLine | wartość logiczna | prawda | Jeśli ma wartość true (prawda), linie osi są wyświetlane. Jeśli ma wartość false (fałsz), nie są, a wartością domyślną funkcji showValueLabels jest false (fałsz). |
Etykiety programu ShowValue | wartość logiczna | true (prawda), chyba że showAxisLines ma wartość false (fałsz). | Jeśli ma wartość true (prawda), etykiety osi czasu są wyświetlane. |
tytuł | Tablica ciągów znaków | Nie są wyświetlane żadne tytuły | Tytuły do użycia w poszczególnych wykresach. |
szerokość | liczba | Szerokość kontenera | Szerokość wykresów w pikselach. |
układ : layout (might be used for DTP, web and app design) | tekst | „v” | Układ pionowy lub poziomy: „v” w pionie, „h” w poziomie. |
Metody
Metoda | Typ zwracanej wartości | Opis |
---|---|---|
draw(data, options) |
brak | Rysuje wykres. |
getSelection() |
Tablica elementów wyboru | Zwraca indeksy wybranych wykresów jako tablicę obiektów. Każdy obiekt ma właściwość dotyczącą kolumny zawierającą numer kolumny wybranego miniwykresu. Może zwrócić więcej niż jedną wybraną kolumnę. |
setSelection(selection) |
brak | Powoduje wybranie określonych wykresów przebiegu w czasie i odznaczenie tych, które nie zostały określone. wybór to tablica obiektów, każdy z liczbową właściwością column , która jest indeksem wybranego miniwykresu. Więcej informacji znajdziesz w sekcji setSelection() . |
Zdarzenia
Nazwa | Opis | Usługi |
---|---|---|
wybierz | Standardowe zdarzenie wyboru. | Brak |
Zasady dotyczące danych
Więcej informacji znajdziesz w zasadach rejestrowania interfejsu Chart API.