Omówienie
Schodkowy wykres warstwowy renderowany w przeglądarce za pomocą SVG lub VML. Wyświetla wskazówki po najechaniu kursorem na kroki.
Prosty 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':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Director (Year)', 'Rotten Tomatoes', 'IMDB'], ['Alfred Hitchcock (1935)', 8.4, 7.9], ['Ralph Thomas (1959)', 6.9, 6.5], ['Don Sharp (1978)', 6.5, 6.4], ['James Hawes (2008)', 4.4, 6.2] ]); var options = { title: 'The decline of \'The 39 Steps\'', vAxis: {title: 'Accumulated Rating'}, isStacked: true }; var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Niektóre popularne opcje
Wykresy warstwowe krokowe, podobnie jak wszystkie inne Wykresy Google, mają wiele opcji przedstawionych tutaj. Oto przykład, który przedstawia niektóre z najczęstszych:
Na powyższym wykresie zmieniliśmy kolor tła (backgroundColor
), przenieśliśmy legendę na sam dół o element legend.position
, usunęliśmy pionowe linie, ustawiając wartość connectSteps
na wartość fałsz, i dostosowaliśmy kolory. Oto jak to zrobić:
var options = { backgroundColor: '#ddd', legend: { position: 'bottom' }, connectSteps: false, colors: ['#4374E0', '#53A8FB', '#F1CA3A', '#E49307'], isStacked: true, };
Skumulowane wykresy warstwowe krokowe
Wykresy warstwowe krokowe obsługują też grupowanie, w tym 100%. Skumulowany wykres warstwowy krokowy to wykres warstwowy krokowy, na którym powiązane wartości są umieszczone jedna nad drugą. Jeśli występują jakieś wartości ujemne, są one skumulowane w odwrotnej kolejności poniżej punktu odniesienia na wykresie. Przy 100% stosów elementów w każdej wartości domeny są przeskalowane w taki sposób, że sumują się do 100%. Opcje w tym formacie to isStacked: 'percent'
, który formatuje każdą wartość jako procent 100%, oraz isStacked: 'relative'
, który formatuje każdą wartość jako ułamek 1. Istnieje też opcja isStacked: 'absolute'
, która jest odpowiednikiem metody isStacked: true
.
Zwróć uwagę, że na wykresie skumulowanym 100% po prawej stronie wartości znaczników są zapisywane na podstawie względnej skali od 0 do 1 jako ułamków 1.
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, vAxis: {minValue: 0} };
var options_fullStacked = { isStacked: 'relative', height: 300, legend: {position: 'top', maxLines: 3}, vAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };
Wczytuję
Nazwa pakietu google.charts.load
to "corechart"
.
google.charts.load("current", {packages: ["corechart"]});
Nazwa klasy wizualizacji to google.visualization.SteppedAreaChart
.
var visualization = new google.visualization.SteppedAreaChart(container);
Format danych
Wiersze: każdy wiersz tabeli odpowiada grupie słupków.
Kolumny:
Kolumna 0 | Kolumna 1 | ... | Kolumna N | |
---|---|---|---|---|
Przeznaczenie: | Etykiety grup na osi X | Wartości słupka 1 w tej grupie | ... | Wartości słupka N w tej grupie |
Typ danych: | string, | Liczba | ... | Liczba |
Rola: | domena | dane | ... | dane |
Opcjonalne role kolumn: | ... |
Opcje konfiguracji
Nazwa | |
---|---|
aggregationTarget |
Sposób grupowania wybranych danych w etykietkach:
Pole
aggregationTarget jest często używane w połączeniu z parametrami selectionMode i tooltip.trigger , na przykład:
var options = { // Allow multiple // simultaneous selections. selectionMode: 'multiple', // Trigger tooltips // on selections. tooltip: {trigger: 'selection'}, // Group selections // by x-value. aggregationTarget: 'category', }; Typ: ciąg znaków
Domyślnie: „auto”.
|
animation.duration |
Czas trwania animacji w milisekundach. Szczegółowe informacje znajdziesz w dokumentacji animacji. Typ: liczba
Wartość domyślna: 0
|
animation.easing |
Funkcja wygładzania zastosowana do animacji. Dostępne są te ustawienia:
Typ: ciąg znaków
Domyślnie: „liniowy”
|
animation.startup |
Określa, czy wykres będzie animowany przy pierwszym rysowaniu. Jeśli parametr ma wartość Typ: wartość logiczna
Domyślnie fałsz
|
areaOpacity |
Domyślna przezroczystość obszaru pod krokiem, gdzie 0,0 oznacza pełną przezroczystość, a 1,0 – pełną przezroczystość. Nie ma wpływu na przezroczystość linii schodkowej. Aby utworzyć wykres liniowy krokowy, ustaw tę wartość na 0. Aby określić przezroczystość pojedynczej serii, ustaw wartość Typ: liczba, 0,0–1,0
Wartość domyślna: 0,3
|
axisTitlesPosition |
Gdzie umieszczać tytuły osi w porównaniu z obszarem wykresu. Obsługiwane wartości:
Typ: ciąg znaków
Domyślnie: „out”
|
backgroundColor |
Kolor tła głównego obszaru wykresu. Może to być prosty ciąg znaków koloru HTML, np. Typ: ciąg znaków lub obiekt
Domyślnie: „white”
|
backgroundColor.stroke |
Kolor obramowania wykresu jako ciąg znaków HTML koloru. Typ: ciąg znaków
Domyślnie: „#666”.
|
backgroundColor.strokeWidth |
Szerokość obramowania w pikselach. Typ: liczba
Wartość domyślna: 0
|
backgroundColor.fill |
Kolor wypełnienia wykresu jako ciąg znaków HTML koloru. Typ: ciąg znaków
Domyślnie: „white”
|
chartArea |
Obiekt z elementami służącymi do konfigurowania miejsca docelowego i rozmiaru obszaru wykresu (gdzie sam wykres jest rysowany, z wyłączeniem osi i legend). Obsługiwane są dwa formaty: liczba lub liczba, po której następuje znak %. Prosta liczba to wartość w pikselach, po której następuje znak %, a po nim wartość procentowa. Przykład: Typ: obiekt
Wartość domyślna:null
|
chartArea.backgroundColor |
Kolor tła obszaru wykresu. Używany ciąg może być ciągiem szesnastkowym (np. „#fdc”) lub angielską nazwę koloru. Jeśli używany jest obiekt, można podać te właściwości:
Typ: ciąg znaków lub obiekt
Domyślnie: „white”
|
chartArea.left |
Jak daleko od lewej krawędzi należy narysować wykres. Typ: liczba lub ciąg znaków.
Domyślnie automatycznie
|
chartArea.top |
Odległość wykresu od górnej krawędzi. Typ: liczba lub ciąg znaków.
Domyślnie automatycznie
|
chartArea.width |
Szerokość obszaru wykresu. Typ: liczba lub ciąg znaków.
Domyślnie automatycznie
|
chartArea.height |
Wysokość obszaru wykresu. Typ: liczba lub ciąg znaków.
Domyślnie automatycznie
|
kolory |
Kolory elementów wykresu. Tablica ciągów znaków, w których każdy element jest ciągiem znaków koloru HTML, np. Typ: tablica ciągów znaków
Domyślne:kolory domyślne
|
connectSteps |
Jeśli ma wartość true (prawda), łączy kroki, tworząc linię schodkową. W przeciwnym razie wyświetla się tylko górna linia. Domyślnie kroki są połączone. Typ: wartość logiczna
Wartość domyślna:true (prawda)
|
enableInteractivity |
Określa, czy wykres generuje zdarzenia dotyczące użytkowników czy reaguje na interakcję użytkownika. Jeśli ma wartość false (fałsz), wykres nie będzie wywoływać zdarzenia „select” ani innych zdarzeń związanych z interakcją (ale będzie generować zdarzenia gotowe lub zdarzenia błędu) i nie będzie wyświetlać tekstu wyświetlanego po najechaniu kursorem ani w inny sposób zmieniać się w zależności od danych wejściowych użytkownika. Typ: wartość logiczna
Wartość domyślna:true (prawda)
|
focusTarget |
Typ elementu, który zostanie zaznaczony po najechaniu kursorem myszy. Wpływa też na to, który element jest wybierany kliknięciem myszy i który element tabeli danych jest powiązany ze zdarzeniami. Może to być:
W polu „category” (kategoria) etykietka pokazuje wszystkie wartości kategorii. Ta opcja może przydać się do porównywania wartości różnych serii. Typ: ciąg znaków
Wartość domyślna: „datum”.
|
fontSize |
Domyślny rozmiar czcionki całego tekstu na wykresie (w pikselach). Możesz zastąpić to ustawienie za pomocą właściwości dla konkretnych elementów wykresu. Typ: liczba
Domyślne:automatyczne
|
fontName |
Domyślna krój czcionki dla całego tekstu na wykresie. Możesz zastąpić to ustawienie za pomocą właściwości dla konkretnych elementów wykresu. Typ: ciąg znaków
Wartość domyślna: „Blogger”
|
forceIFrame |
Rysuje wykres wewnątrz ramki wbudowanej. (Pamiętaj, że w IE8 ta opcja jest ignorowana – wszystkie wykresy w IE8 są rysowane w ramkach i-frame). Typ: wartość logiczna
Wartość domyślna: fałsz.
|
hAxis |
Obiekt z elementami umożliwiającymi konfigurowanie różnych elementów osi poziomej. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } Typ: obiekt
Wartość domyślna:null
|
hAxis.direction |
Kierunek, w którym rosną wartości na osi poziomej. Określ Typ: 1 lub -1
Wartość domyślna: 1
|
hAxis.textPosition |
Położenie tekstu na osi poziomej względem obszaru wykresu. Obsługiwane wartości: „out”, „in”, „none”. Typ: ciąg znaków
Domyślnie: „out”
|
hAxis.textStyle |
Obiekt określający styl tekstu osi poziomej. Obiekt ma ten format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.ticks |
Zastępuje automatycznie wygenerowane znaczniki osi X określoną tablicą. Każdy element tablicy powinien być prawidłową wartością znacznika (np. liczba, data, data i godzina lub godzina) albo obiektem. Jeśli jest to obiekt, powinien mieć właściwość
Pole viewWindow zostanie automatycznie rozwinięte i będzie zawierać minimalną i maksymalną liczbę taktów, chyba że określisz Przykłady:
Typ: tablica elementów.
Domyślnie automatycznie
|
hAxis.title |
Właściwość Typ: ciąg znaków
Wartość domyślna:null
|
hAxis.titleTextStyle |
Obiekt określający styl tekstu tytułu osi poziomej. Obiekt ma ten format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.allowContainerBoundaryTextCutoff |
W przypadku wartości false (fałsz) najbardziej zewnętrzne etykiety będą ukryte, zamiast zezwalać na ich przycinanie przez kontener wykresu. Jeśli ma wartość Prawda, przycinanie etykiet jest dozwolone. Typ: wartość logiczna
Wartość domyślna: fałsz.
|
hAxis.slantedText |
Jeśli ma wartość prawda, narysuj tekst na osi poziomej pod kątem, aby dopasować większy tekst wzdłuż osi. Jeśli nie, narysuj tekst osi poziomej pionowo. Jeśli tekst jest przechylony pionowo, domyślnie nie zmieści się on w całości. Zwróć uwagę, że ta opcja jest dostępna tylko wtedy, gdy Typ: wartość logiczna
Domyślne:automatyczne
|
hAxis.slantedTextAngle |
Kąt tekstu na osi poziomej (jeśli jest on skośny). Ignorowana, jeśli właściwość Typ: liczba, -90–90
Wartość domyślna: 30
|
hAxis.maxAlternation |
Maksymalna liczba poziomów tekstu na osi poziomej. Jeśli etykiety tekstowe osi staną się zbyt zatłoczone, serwer może przesuwać sąsiednie etykiety w górę lub w dół, aby je lepiej dopasować. Ta wartość określa największą liczbę używanych poziomów. Serwer może użyć mniejszej liczby poziomów, jeśli etykiety mieszczą się bez nakładania się. Domyślna wartość dla dat i godzin to 1. Typ: liczba
Wartość domyślna: 2
|
hAxis.maxTextLines |
Maksymalna dozwolona liczba wierszy w etykietach tekstowych. Etykiety mogą obejmować wiele wierszy, jeśli są za długie, a liczba wierszy jest domyślnie ograniczona wysokością dostępnego miejsca. Typ: liczba
Domyślnie automatycznie
|
hAxis.minTextSpacing |
Minimalne odstępy w poziomie (w pikselach) dopuszczalne między 2 przyległymi etykietami tekstowymi. Jeśli etykiety są rozmieszczone zbyt gęsto lub zbyt długie, odstępy mogą spaść poniżej tego progu i w takim przypadku zostanie zastosowany jeden z mechanizmów ułatwiających zachowanie poufności etykiet (na przykład obcięcie etykiet lub usunięcie niektórych z nich). Typ: liczba
Domyślna: wartość
hAxis.textStyle.fontSize . |
hAxis.showTextEvery |
Liczba etykiet osi poziomej do pokazania, gdzie 1 oznacza każdą etykietę, 2 oznacza, że są widoczne wszystkie pozostałe etykiety itd. Domyślnie wyświetlane jest jak najwięcej etykiet bez nakładania się etykiet. Typ: liczba
Domyślne:automatyczne
|
hAxis.viewWindow |
Określa zakres przycięcia osi poziomej. Typ: obiekt
Wartość domyślna:null
|
hAxis.viewWindow.max |
Indeks wiersza liczony od zera, na którym kończy się okno przycinania. Punkty danych w tym indeksie i wyższych, zostaną przycięte. W połączeniu z funkcją Ignorowana, gdy atrybut Typ: liczba
Domyślnie automatycznie
|
hAxis.viewWindow.min |
Indeks wiersza liczony od zera, od którego zaczyna się okno przycinania. Punkty danych w indeksach niższych niż ten zostaną przycięte. W połączeniu z funkcją Ignorowana, gdy atrybut Typ: liczba
Domyślnie automatycznie
|
wysokość |
Wysokość wykresu w pikselach. Typ: liczba
Domyślna: wysokość elementu nadrzędnego.
|
isStacked |
Jeśli ma wartość Prawda, umieszcza elementy wszystkich serii przy każdej wartości domeny. Uwaga: na wykresach kolumnowych, obszarowych i SteppedArea Wykresy Google odwracają kolejność elementów legendy, by lepiej pasowały do ułożenia elementów serii (np. seria 0 będzie skrajnie skrajnie legendą). To nie dotyczy wykresów słupkowych.
Opcja Opcje
Przy 100% stosów obliczona wartość każdego elementu pojawi się na etykietce po jego rzeczywistej wartości.
Na osi docelowej domyślnie pojawią się wartości zaznaczenia na podstawie względnej skali 0–1 jako ułamków 1 dla
Grupowanie 100% obsługuje tylko wartości danych typu Typ: wartość logiczna/ciąg
Wartość domyślna: fałsz.
|
legenda |
Obiekt z członkami służącymi do konfigurowania różnych aspektów legendy. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Typ: obiekt
Wartość domyślna:null
|
legend.alignment |
Wyrównanie legendy. Użyj jednego z tych rodzajów wartości:
Początek, środek i koniec odnoszą się do stylu (pionowego lub poziomego) legendy. Na przykład w legendzie „po prawej” punkty „początek” i „koniec” znajdują się odpowiednio na górze i na dole. W legendzie „góra” wartości „początek” i „koniec” znajdują się odpowiednio po lewej i prawej stronie obszaru. Wartość domyślna zależy od pozycji legendy. Domyślna wartość w legendach „bottom” to „center”, a w innych – „start”. Typ: ciąg znaków
Domyślne:automatyczne
|
legend.maxLines |
Maksymalna liczba wierszy w legendzie. Aby dodać wiersze do legendy, ustaw wartość większą niż 1. Uwaga: dokładna logika używana do określenia rzeczywistej liczby wyrenderowanych wierszy wciąż się zmienia. Obecnie ta opcja działa tylko wtedy, gdy pole legend.position ma wartość „top”. Typ: liczba
Wartość domyślna: 1
|
legend.position |
Pozycja legendy. Użyj jednego z tych rodzajów wartości:
Typ: ciąg znaków
Domyślnie: „right”
|
legend.textStyle |
Obiekt określający styl tekstu legendy. Obiekt ma ten format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
lineDashStyle |
Wzorzec włączania i wyłączania przerywanych linii. Na przykład Typ: tablica liczb
Wartość domyślna:null
|
reverseCategories |
Jeśli zasada ma wartość Prawda, seria jest rysowana od prawej do lewej. Domyślnie rysowanie od lewej do prawej. Typ: wartość logiczna
Wartość domyślna: fałsz.
|
selectionMode |
Gdy Typ: ciąg znaków
Domyślnie: „pojedynczy”
|
seria |
Tablica obiektów, z których każdy opisuje format odpowiedniej serii na wykresie. Aby użyć wartości domyślnych dla serii, podaj pusty obiekt {}. Jeśli nie określono serii lub wartości, zostanie użyta wartość globalna. Każdy obiekt obsługuje te właściwości:
Możesz podać tablicę obiektów, z których każdy odnosi się do serii w podanej kolejności, albo określić obiekt, w którym każdy element podrzędny ma klucz numeryczny wskazujący, do której serii ma zastosowanie. Na przykład dwie poniższe deklaracje są identyczne. Pierwsza seria jest zadeklarowana jako czarna i nie ma jej w legendzie, a czwarta – jako czerwona i nie ma jej w legendzie: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Typ: tablica obiektów lub obiektów z zagnieżdżonymi obiektami
Wartość domyślna: {}
|
motyw |
Motyw to zestaw wstępnie zdefiniowanych wartości opcji, które współpracują ze sobą, aby uzyskać określony sposób działania wykresu lub efektu wizualnego. Obecnie dostępny jest tylko 1 motyw:
Typ: ciąg znaków
Wartość domyślna:null
|
tytuł |
Tekst do wyświetlenia nad wykresem. Typ: ciąg znaków
Domyślnie bez tytułu.
|
titlePosition |
Gdzie umieścić tytuł wykresu w porównaniu do obszaru wykresu. Obsługiwane wartości:
Typ: ciąg znaków
Domyślnie: „out”
|
titleTextStyle |
Obiekt, który określa styl tekstu tytułu. Obiekt ma ten format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
etykietka |
Obiekt z elementami służącymi do konfigurowania różnych elementów etykietek. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej: {textStyle: {color: '#FF0000'}, showColorCode: true} Typ: obiekt
Wartość domyślna:null
|
tooltip.ignoreBounds |
Jeśli ustawisz wartość Uwaga: dotyczy to tylko etykiet HTML. Jeśli ta opcja jest włączona w etykietkach SVG, wszystkie nadmiarowe elementy poza granicami wykresu zostaną przycięte. Więcej informacji znajdziesz w sekcji Dostosowywanie treści etykietki. Typ: wartość logiczna
Wartość domyślna: fałsz.
|
tooltip.isHtml |
Jeśli ma wartość Prawda, używaj etykietek renderowanych HTML (a nie renderowanych w formacie SVG). Więcej informacji znajdziesz w sekcji Dostosowywanie treści etykietki. Uwaga: wizualizacja wykresu bąbelkowego nie obsługuje dostosowywania zawartości etykietki HTML za pomocą roli danych kolumny etykietki. Typ: wartość logiczna
Wartość domyślna: fałsz.
|
tooltip.showColorCode |
Jeśli ma wartość prawda, obok informacji o serii na etykietce wyświetlaj kolorowe kwadraty. Wartość domyślna to true, gdy Typ: wartość logiczna
Domyślne:automatyczne
|
tooltip.textStyle |
Obiekt, który określa styl tekstu etykietki. Obiekt ma ten format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
Interakcja użytkownika, która powoduje wyświetlenie etykietki:
Typ: ciąg znaków
Domyślnie: „fokus”
|
vAxes |
Określa właściwości poszczególnych osi pionowych, jeśli wykres ma wiele osi pionowych.
Każdy obiekt podrzędny jest obiektem
Aby określić wykres z wieloma osiami pionowymi, najpierw zdefiniuj nową oś za pomocą funkcji { series: { 2: { targetAxisIndex:1 } }, vAxes: { 1: { title:'Losses', textStyle: {color: 'red'} } } }
Ta właściwość może być obiektem lub tablicą. Obiekt to zbiór obiektów, z których każda ma etykietę liczbową określającą definiowaną oś – jest to format pokazany powyżej. Tablica to tablica obiektów, po jednym na oś. Na przykład ten zapis formatu tablicy jest identyczny z pokazanym powyżej obiektem vAxes: [ {}, // Nothing specified for axis 0 { title:'Losses', textStyle: {color: 'red'} // Axis 1 } ] Typ: tablica obiektów lub obiektów podrzędnych
Wartość domyślna:null
|
vAxis |
Obiekt ze elementami służącymi do konfigurowania różnych elementów osi pionowej. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Typ: obiekt
Wartość domyślna:null
|
vAxis.baseline |
Właściwość Typ: liczba
Domyślne:automatyczne
|
vAxis.baselineColor |
Określa kolor punktu odniesienia na osi pionowej. Może to być dowolny ciąg znaków HTML koloru, na przykład Typ: liczba
Domyślny: „black”
|
vAxis.direction |
Kierunek, w którym rosną wartości na osi pionowej. Domyślnie niskie wartości znajdują się na dole wykresu. Określ Typ: 1 lub -1
Wartość domyślna: 1
|
vAxis.format |
Ciąg formatowania etykiet osi liczbowej. To jest podzbiór
zestawu wzorców OIOM
.
Na przykład
Faktyczne formatowanie zastosowane do etykiety jest pobierane z języka, w którym załadowano interfejs API. Więcej informacji znajdziesz w artykule o wczytywaniu wykresów w określonym języku .
Przy obliczaniu wartości znaczników i linii siatki branych jest pod uwagę kilka alternatywnych kombinacji wszystkich odpowiednich opcji linii siatki, a te alternatywne zostaną odrzucone, jeśli sformatowane etykiety znacznika będą się powtarzać lub się nakładać.
Możesz więc określić Typ: ciąg znaków
Domyślnie automatycznie
|
vAxis.gridlines |
Obiekt ze elementami służącymi do konfigurowania linii siatki na osi pionowej. Pamiętaj, że linie siatki na osi pionowej są rysowane poziomo. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej: {color: '#333', minSpacing: 20} Typ: obiekt
Wartość domyślna:null
|
vAxis.gridlines.color |
Kolor pionowych linii siatki w obszarze wykresu. Podaj prawidłowy ciąg znaków HTML koloru. Typ: ciąg znaków
Domyślnie: „#CCC”.
|
vAxis.gridlines.count |
Przybliżona liczba poziomych linii siatki w obszarze wykresu.
Jeśli podasz liczbę dodatnią dla elementu Typ: liczba
Wartość domyślna: -1
|
vAxis.minorGridlines |
Obiekt z elementami umożliwiającymi konfigurowanie podrzędnych linii siatki na osi pionowej, podobnie jak w przypadku opcji vAxis.gridlines. Typ: obiekt
Wartość domyślna:null
|
vAxis.minorGridlines.color |
Kolor pionowych podrzędnych linii siatki w obszarze wykresu. Podaj prawidłowy ciąg znaków HTML koloru. Typ: ciąg znaków
Domyślny: połączenie koloru linii siatki i koloru tła.
|
vAxis.minorGridlines.count |
Opcja MinGridlines.count jest obecnie głównie wycofywana. Wyjątkiem jest wyłączanie podrzędnych linii siatki przez ustawienie wartości licznika na 0. Liczba mniejszych linii siatki zależy od odstępu między głównymi liniami siatki (patrz: vAxis.gridlines.interval) i minimalnej wymaganej przestrzeni (patrz vAxis.minorGridlines.minSpacing). Typ: liczba
Wartość domyślna: 1
|
vAxis.logScale |
Jeśli ma wartość prawda, oś pionowa jest skalą logarytmiczną. Uwaga: wszystkie wartości muszą być dodatnie. Typ: wartość logiczna
Wartość domyślna: fałsz.
|
vAxis.scaleType |
Właściwość
Typ: ciąg znaków
Wartość domyślna:null
|
vAxis.textPosition |
Położenie tekstu na osi pionowej względem obszaru wykresu. Obsługiwane wartości: „out”, „in”, „none”. Typ: ciąg znaków
Domyślnie: „out”
|
vAxis.textStyle |
Obiekt określający styl tekstu osi pionowej. Obiekt ma ten format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.ticks |
Zastępuje automatycznie wygenerowane znaczniki osi Y określoną tablicą. Każdy element tablicy powinien być prawidłową wartością znacznika (np. liczba, data, data i godzina lub godzina) albo obiektem. Jeśli jest to obiekt, powinien mieć właściwość
Pole viewWindow zostanie automatycznie rozwinięte i będzie zawierać minimalną i maksymalną liczbę taktów, chyba że określisz Przykłady:
Typ: tablica elementów.
Domyślnie automatycznie
|
vAxis.title |
Właściwość Typ: ciąg znaków
Domyślnie bez tytułu.
|
vAxis.titleTextStyle |
Obiekt określający styl tekstu tytułu osi pionowej. Obiekt ma ten format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.maxValue |
Przenosi maksymalną wartość osi pionowej do określonej wartości. Na większości wykresów wartość ta będzie wyższa. Ignorowana, jeśli ustawiona jest wartość mniejsza niż maksymalna wartość „y” danych.
Typ: liczba
Domyślne:automatyczne
|
vAxis.minValue |
Przenosi minimalną wartość osi pionowej do określonej wartości. Na większości wykresów będzie to zmiana w dół. Ignorowana, jeśli ustawiona jest wartość większa niż minimalna wartość y danych.
Typ: liczba
Wartość domyślna:null
|
vAxis.viewWindowMode |
Określa, jak skalować oś pionową, by renderować wartości na obszarze wykresu. Obsługiwane są te wartości ciągów:
Typ: ciąg znaków
Domyślnie: odpowiednik „ładne”. Jednak jeśli są używane, pierwszeństwo mają
vaxis.viewWindow.min i vaxis.viewWindow.max .
|
vAxis.viewWindow |
Określa zakres przycięcia osi pionowej. Typ: obiekt
Wartość domyślna:null
|
vAxis.viewWindow.max |
Maksymalna wartość danych pionowych do renderowania. Ignorowana, gdy atrybut Typ: liczba
Domyślnie automatycznie
|
vAxis.viewWindow.min |
Minimalna wartość danych pionowych do renderowania. Ignorowana, gdy atrybut Typ: liczba
Domyślnie automatycznie
|
szerokość |
Szerokość wykresu w pikselach. Typ: liczba
Domyślna: szerokość elementu nadrzędnego.
|
Metody
Metoda | |
---|---|
draw(data, options) |
Rysuje wykres. Wykres akceptuje kolejne wywołania metod dopiero po wywołaniu zdarzenia Return Type: brak
|
getAction(actionID) |
Zwraca obiekt działania etykietki z żądanym obiektem Return Type: (Typ zwracania): obiekt
|
getBoundingBox(id) |
Zwraca obiekt zawierający lewo, górę, szerokość i wysokość elementu wykresu
Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwracania): obiekt
|
getChartAreaBoundingBox() |
Zwraca obiekt zawierający lewo, górę, szerokość i wysokość zawartości wykresu (tj. bez etykiet i legendy):
Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwracania): obiekt
|
getChartLayoutInterface() |
Zwraca obiekt zawierający informacje o pozycji na ekranie wykresu i jego elementów. W przypadku zwróconego obiektu można wywołać te metody:
Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwracania): obiekt
|
getHAxisValue(xPosition, optional_axis_index) |
Zwraca poziomą wartość danych w punkcie Przykład: Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwrotu): liczba
|
getImageURI() |
Zwraca wykres zserializowany jako identyfikator URI obrazu. Wywołuj je po narysowaniu wykresu. Zobacz Drukowanie wykresów PNG. Return Type: (Typ zwracania): ciąg znaków
|
getSelection() |
Zwraca tablicę wybranych elementów wykresu.
Elementy do wyboru to kroki, wpisy legendy i kategorie.
Krok odpowiada komórce w tabeli danych, wpisowi w legendzie kolumnie (indeks wiersza ma wartość null) i kategorii wiersza (indeks kolumny ma wartość null).
Na tym wykresie w danym momencie można wybrać tylko 1 element.
Return Type: tablica elementów zaznaczenia.
|
getVAxisValue(yPosition, optional_axis_index) |
Zwraca pionową wartość danych przy Przykład: Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwrotu): liczba
|
getXLocation(dataValue, optional_axis_index) |
Zwraca współrzędną X piksela dla elementu Przykład: Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwrotu): liczba
|
getYLocation(dataValue, optional_axis_index) |
Zwraca współrzędną Y piksela ( Przykład: Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwrotu): liczba
|
removeAction(actionID) |
Usuwa z wykresu działanie etykietki z żądanym elementem Typ zwrotu:
none |
setAction(action) |
Ustawia działanie etykietki, które ma być wykonywane po kliknięciu tekstu działania przez użytkownika.
Metoda
Przed wywołaniem metody Typ zwrotu:
none |
setSelection() |
Wybiera określone elementy wykresu. Anuluje wcześniejszy wybór.
Elementy do wyboru to kroki, wpisy legendy i kategorie.
Krok odpowiada komórce w tabeli danych, wpisowi w legendzie kolumnie (indeks wiersza ma wartość null) i kategorii wiersza (indeks kolumny ma wartość null).
Na tym wykresie można wybrać tylko 1 element naraz.
Return Type: brak
|
clearChart() |
Czyści wykres i zwalnia wszystkie przydzielone Ci zasoby. Return Type: brak
|
Zdarzenia
Więcej informacji o korzystaniu z tych zdarzeń znajdziesz w artykułach Podstawowa interaktywność, Obsługa zdarzeń i Uruchamianie zdarzeń.
Nazwa | |
---|---|
animationfinish |
Uruchamiane po zakończeniu animacji przejścia. Właściwości: brak
|
click |
Uruchamiane, gdy użytkownik kliknie wykres. Pozwala określić, kiedy klikane są tytuł, elementy danych, wpisy legendy, osie, linie siatki lub etykiety. Właściwości: targetID
|
error |
Uruchamiane, gdy podczas próby wyrenderowania wykresu wystąpi błąd. Właściwości: identyfikator, komunikat
|
legendpagination |
Uruchamiane, gdy użytkownik kliknie strzałki podziału na strony w legendzie. Zwraca bieżący indeks stron legendy liczony od zera oraz łączną liczbę stron. Właściwości: currentPageIndex, totalPages
|
onmouseover |
Uruchamiane, gdy użytkownik najedzie kursorem na element wizualny. Przekazuje z powrotem indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Właściwości: wiersz, kolumna
|
onmouseout |
Uruchamiane, gdy użytkownik najedzie kursorem poza obiekt wizualny. Przekazuje z powrotem indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Właściwości: wiersz, kolumna
|
ready |
Wykres jest gotowy do obsługi wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywołań po jego narysowaniu, skonfiguruj detektor tego zdarzenia przed wywołaniem metody Właściwości: brak
|
select |
Uruchamiane, gdy użytkownik kliknie element wizualny. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer Właściwości: brak
|
Zasady dotyczące danych
Cały kod i dane są przetwarzane i renderowane w przeglądarce. Żadne dane nie są wysyłane na żaden serwer.