Omówienie
Wykresy słupkowe Google są renderowane w przeglądarce za pomocą SVG lub VML, w zależności od tego, który typ jest odpowiedni dla przeglądarki użytkownika. Podobnie jak w przypadku wszystkich wykresów Google, wykresy słupkowe wyświetlają etykietki, gdy użytkownik najedzie na dane. Pionową wersję tego wykresu znajdziesz na wykresie kolumnowym.
Przykłady
Kolorowe paski
Zapiszmy gęstość czterech metali szlachetnych:
Powyżej wszystkie kolory są domyślnym kolorem niebieskim. Dzieje się tak, ponieważ są one częścią tej samej serii. Gdyby istnieje druga seria, miałaby ona kolor czerwony. Te kolory możemy dostosować za pomocą roli stylu:
Są 3 sposoby wyboru kolorów, a w naszej tabeli danych znajdziesz je wszystkie: wartości RGB, angielskie nazwy kolorów i deklarację w stylu CSS:
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }], ['Copper', 8.94, '#b87333'], // RGB value ['Silver', 10.49, 'silver'], // English color name ['Gold', 19.30, 'gold'], ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration ]);
Style słupków
Rola stylu pozwala kontrolować kilka aspektów wyglądu paska za pomocą deklaracji podobnych do CSS:
color
opacity
fill-color
fill-opacity
stroke-color
stroke-opacity
stroke-width
Nie zalecamy zbyt swobodnego mieszania stylów na wykresie – wybierz styl i trzymaj się go. Aby zaprezentować wszystkie atrybuty stylu, możesz skorzystać z próbki:
W pierwszych 2 słupkach jest określony określony color
(pierwszy z angielską nazwą, drugi z wartością RGB). Nie wybrano elementu opacity
, więc używana jest domyślna wartość 1,0 (w pełni nieprzezroczysta), dlatego drugi pasek zasłania siatkę za nią. Na 3 słupku widać linię siatki (opacity
) o wartości 0,2. Na czwartym pasku używane są 3 atrybuty stylu: stroke-color
i stroke-width
do rysowania obramowania oraz fill-color
do określania koloru prostokąta wewnątrz. Pasek po prawej stronie dodatkowo używa parametrów stroke-opacity
i fill-opacity
do wyboru przezroczystości obramowania i wypełnienia:
function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Visitations', { role: 'style' } ], ['2010', 10, 'color: gray'], ['2020', 14, 'color: #76A7FA'], ['2030', 16, 'opacity: 0.2'], ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'], ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2'] ]);
Słupki etykiet
Wykresy mają różne rodzaje etykiet, np. etykiety znaczników, legendy i etykiety na etykietkach. W tej sekcji pokażemy, jak dodawać etykiety do słupków wykresu słupkowego (lub w ich pobliżu).
Załóżmy, że chcemy oznaczyć każdy słupek odpowiednim symbolem chemicznym. Umożliwia to rola adnotacji:
W naszej tabeli danych definiujemy nową kolumnę ze znakiem { role:
'annotation' }
, w której będą przechowywane etykiety słupkowe:
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ], ['Copper', 8.94, '#b87333', 'Cu' ], ['Silver', 10.49, 'silver', 'Ag' ], ['Gold', 19.30, 'gold', 'Au' ], ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ] ]);
Użytkownicy mogą najeżdżać kursorem na słupki, aby zobaczyć wartości danych, ale warto też uwzględnić je na słupkach:
Jest to nieco bardziej skomplikowane, niż powinno być, ponieważ tworzymy DataView
, aby określić adnotację dla każdego słupka.
<script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ["Element", "Density", { role: "style" } ], ["Copper", 8.94, "#b87333"], ["Silver", 10.49, "silver"], ["Gold", 19.30, "gold"], ["Platinum", 21.45, "color: #e5e4e2"] ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }, 2]); var options = { title: "Density of Precious Metals, in g/cm^3", width: 600, height: 400, bar: {groupWidth: "95%"}, legend: { position: "none" }, }; var chart = new google.visualization.BarChart(document.getElementById("barchart_values")); chart.draw(view, options); } </script> <div id="barchart_values" style="width: 900px; height: 300px;"></div>
Aby sformatować wartość w inny sposób, możemy zdefiniować element formatter i zapakować go w taką funkcję:
function getValueAt(column, dataTable, row) { return dataTable.getFormattedValue(row, column); }
Możemy wtedy zadzwonić za pomocą numeru calc: getValueAt.bind(undefined, 1)
.
Jeśli etykieta jest zbyt duża i mieści się w całości na pasku, jest wyświetlana na zewnątrz:
Skumulowane wykresy słupkowe
Skumulowany wykres słupkowy to wykres słupkowy, który oznacza, że powiązane wartości są na siebie nakładane. Jeśli występują wartości ujemne, są one ułożone w odwrotnej kolejności poniżej punktu odniesienia na osi wykresu. Skumulowane wykresy słupkowe są zwykle używane, gdy kategoria w naturalny sposób dzieli się na komponenty. Weźmy na przykład kilka hipotetycznych wartości sprzedaży książek podzielonych według gatunku i porównywanych w czasie:
Aby utworzyć skumulowany wykres słupkowy, ustaw opcję isStacked
na true
:
var data = google.visualization.arrayToDataTable([ ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature', { role: 'annotation' } ], ['2010', 10, 24, 20, 32, 18, 5, ''], ['2020', 16, 22, 23, 30, 16, 9, ''], ['2030', 28, 19, 29, 30, 12, 13, ''] ]); var options = { width: 600, height: 400, legend: { position: 'top', maxLines: 3 }, bar: { groupWidth: '75%' }, isStacked: true };
Skumulowane wykresy słupkowe obsługują też skumulowanie 100%, gdzie stosy elementów w poszczególnych wartościach domeny są przeskalowane w taki sposób, że sumują się do 100%. Dostępne opcje 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 funkcji isStacked: true
.
Uwaga: na wykresie skumulowanym 100% po prawej stronie wartości znaczników są oparte na względnej skali 0–1 jako ułamków 1, ale wartości na osi są wyświetlane jako wartości procentowe. Wynika to z faktu, że znaczniki osi procentowej są wynikiem zastosowania formatu „#.##%” do względnych wartości skali 0–1. Jeśli używasz właściwości isStacked: 'percent'
, pamiętaj, by zaznaczyć znaczniki za pomocą względnej skali 0–1.
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, hAxis: {minValue: 0} };
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, hAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };
Tworzenie wykresów słupkowych Materiały
W 2014 r. firma Google przedstawiła wytyczne mające na celu zapewnienie spójnego wyglądu i sposobu działania usług i aplikacji (np. aplikacji na Androida) działających na platformach Google. Nazywamy go Material Design. Udostępnimy „Material” wersje wszystkich naszych podstawowych wykresów. Możesz z nich korzystać, jeśli podoba Ci się ich wygląd.
Tworzenie wykresu słupkowego materiału przypomina tworzenie
„klasycznego” wykresu słupkowego. Wczytujesz interfejs GoogleVisual API (mimo że z pakietem 'bar'
zamiast z pakietem 'corechart'
), definiujesz swoją tabelę danych, a następnie tworzysz obiekt (ale klasy google.charts.Bar
zamiast google.visualization.BarChart
).
Uwaga: Wykresy Material Design nie działają w starszych wersjach Internet Explorera. IE8 i starsze wersje nie obsługują SVG, których wymaga Material Charts.
Wykresy słupkowe Material Design mają wiele drobnych ulepszeń w porównaniu z klasycznymi wykresami słupkowymi, w tym ulepszoną paletę kolorów, zaokrąglone rogi, wyraźniejsze formatowanie etykiet, mniejsze domyślne odstępy między seriami, delikatniejsze linie siatki i tytuły (oraz dodanie napisów).
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]); var options = { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2014-2017', }, bars: 'horizontal' // Required for Material Bar Charts. }; var chart = new google.charts.Bar(document.getElementById('barchart_material')); chart.draw(data, google.charts.Bar.convertOptions(options)); } </script> </head> <body> <div id="barchart_material" style="width: 900px; height: 500px;"></div> </body> </html>
Wykresy Material Design są w wersji beta. Wygląd i interaktywność są w dużej mierze ostateczne, ale wiele opcji dostępnych w klasycznych wykresach nie jest jeszcze dostępnych. Listę opcji, które nie są jeszcze obsługiwane, znajdziesz w tym problemie.
Ponadto sposób deklarowania opcji nie jest sfinalizowany, więc jeśli korzystasz z którejś z opcji klasycznych, musisz przekonwertować je na opcje materiału, zastępując ten wiersz:
chart.draw(data, options);
...na tym:
chart.draw(data, google.charts.Bar.convertOptions(options));
Korzystając z google.charts.Bar.convertOptions()
, możesz korzystać z określonych funkcji, takich jak opcje gotowego ustawienia hAxis/vAxis.format
.
Wykresy Dual-X
Uwaga: osie Dual-X są dostępne tylko w przypadku wykresów materiałowych (tj. dla wykresów z pakietem bar
).
Czasami na wykresie słupkowym chcesz wyświetlić 2 serie z 2 niezależnymi osiami X: górną dla jednej serii i dolną dla innej:
Zwróć uwagę, że nasze 2 osie X mają różne oznaczenia („parseki” i „Wielkość pozorna”), ale każda z nich ma własne, niezależne skale i linie siatki. Jeśli chcesz dostosować to działanie, użyj opcji hAxis.gridlines
.
W poniższym kodzie opcje axes
i series
razem określają wygląd wykresu podwójnie X. Opcja series
określa, która oś ma być używana w przypadku każdej z nich ('distance'
i 'brightness'
; nie muszą one mieć żadnego związku z nazwami kolumn w tabeli danych). Opcja axes
powoduje przekształcenie tego wykresu w wykres podwójny X, umieszczając oś 'apparent magnitude'
na górze, a oś 'parsecs'
na dole.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Galaxy', 'Distance', 'Brightness'], ['Canis Major Dwarf', 8000, 23.3], ['Sagittarius Dwarf', 24000, 4.5], ['Ursa Major II Dwarf', 30000, 14.3], ['Lg. Magellanic Cloud', 50000, 0.9], ['Bootes I', 60000, 13.1] ]); var options = { width: 800, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, bars: 'horizontal', // Required for Material Bar Charts. series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { x: { distance: {label: 'parsecs'}, // Bottom x-axis. brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis. } } }; var chart = new google.charts.Bar(document.getElementById('dual_x_div')); chart.draw(data, options); }; </script> </head> <body> <div id="dual_x_div" style="width: 900px; height: 500px;"></div> </body> </html>
Listy przebojów X
Uwaga: osie Top-X są dostępne tylko w przypadku wykresów materiałowych (tj. tych z pakietem bar
).
Jeśli chcesz umieścić etykiety i tytuł osi X na górze wykresu, a nie na dole, możesz to zrobić w przypadku wykresów materiałowych za pomocą opcji axes.x
:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Opening Move', 'Percentage'], ["King's pawn (e4)", 44], ["Queen's pawn (d4)", 31], ["Knight to King 3 (Nf3)", 12], ["Queen's bishop pawn (c4)", 10], ['Other', 3] ]); var options = { title: 'Chess opening moves', width: 900, legend: { position: 'none' }, chart: { title: 'Chess opening moves', subtitle: 'popularity by percentage' }, bars: 'horizontal', // Required for Material Bar Charts. axes: { x: { 0: { side: 'top', label: 'Percentage'} // Top x-axis. } }, bar: { groupWidth: "90%" } }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); chart.draw(data, options); }; </script> </head> <body> <div id="top_x_div" style="width: 900px; height: 500px;"></div> </body> </html>
Wczytuję
Nazwa pakietu google.charts.load
to "corechart"
.
Nazwa klasy wizualizacji to google.visualization.BarChart
.
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.BarChart(container);
Na wykresach słupkowych Material Design nazwa pakietu google.charts.load
to "bar"
.
Nazwa klasy wizualizacji to google.charts.Bar
.
google.charts.load("current", {packages: ["bar"]});
var chart = new google.charts.Bar(container);
Format danych
Wiersze: każdy wiersz tabeli odpowiada grupie słupków.
Kolumny:
Kolumna 0 | Kolumna 1 | ... | Kolumna N | |
---|---|---|---|---|
Przeznaczenie: | Wartości słupka 1 w tej grupie | ... | Wartości słupka N w tej grupie | |
Typ danych: | Liczba | ... | Liczba | |
Rola: | domena | dane | ... | dane |
Opcjonalne role kolumny: | ... |
Opcje konfiguracji
Nazwa | |
---|---|
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
|
annotations.alwaysOutside |
Jeśli ustawiona jest wartość Typ: wartość logiczna
Wartość domyślna: fałsz.
|
annotations.datum |
W przypadku wykresów obsługujących adnotacje obiekt
annotations.datum umożliwia zastąpienie wybranych z Wykresów Google adnotacji podanych dla poszczególnych elementów danych (np. wartości wyświetlanych wraz z każdym słupkiem na wykresie słupkowym). Kolorem możesz sterować za pomocą parametru annotations.datum.stem.color , długością trzonu za pomocą annotations.datum.stem.length , a stylem – annotations.datum.style .
Typ: obiekt
Domyślny: kolor to „black”, długość to 12, a styl to „punkt”.
|
annotations.domain |
Na wykresach obsługujących adnotacje obiekt
annotations.domain pozwala zastąpić wybór z Wykresów Google w przypadku adnotacji wyświetlanych w domenie (główna oś wykresu, np. oś X na typowym wykresie liniowym). Kolorem możesz sterować za pomocą parametru annotations.domain.stem.color , długością trzonu za pomocą annotations.domain.stem.length , a stylem – annotations.domain.style .
Typ: obiekt
Domyślny: kolor to „black”, długość to 5, styl to „punkt”.
|
annotations.boxStyle |
W przypadku wykresów, które obsługują adnotacje, obiekt var options = { annotations: { boxStyle: { // Color of the box outline. stroke: '#888', // Thickness of the box outline. strokeWidth: 1, // x-radius of the corner curvature. rx: 10, // y-radius of the corner curvature. ry: 10, // Attributes for linear gradient fill. gradient: { // Start color for gradient. color1: '#fbf6a7', // Finish color for gradient. color2: '#33b679', // Where on the boundary to start and // end the color1/color2 gradient, // relative to the upper left corner // of the boundary. x1: '0%', y1: '0%', x2: '100%', y2: '100%', // If true, the boundary for x1, // y1, x2, and y2 is the box. If // false, it's the entire chart. useObjectBoundingBoxUnits: true } } } }; Ta opcja jest obecnie obsługiwana w przypadku wykresów warstwowych, słupkowych, kolumnowych, mieszanych, liniowych i punktowych. Nie jest on obsługiwany w wykresie adnotacji. Typ: obiekt
Wartość domyślna:null
|
annotations.highContrast |
W przypadku wykresów obsługujących adnotacje wartość logiczna
annotations.highContrast umożliwia zastąpienie wybranego przez Wykresy Google koloru adnotacji. Domyślnie annotations.highContrast ma wartość prawda, co sprawia, że na wykresach jest wybierany kolor adnotacji o dobrym kontraście: jasnym kolorem na ciemnym tle i ciemnym na jasnym. Jeśli ustawisz wartość annotations.highContrast na fałsz i nie określisz własnego koloru adnotacji, Wykresy Google będą używać domyślnego koloru serii tej adnotacji:
Typ: wartość logiczna
Wartość domyślna:true (prawda)
|
annotations.stem |
W przypadku wykresów, które obsługują adnotacje, obiekt
annotations.stem pozwala zastąpić wybrany przez Wykresy Google styl rdzenia. Kolorem możesz sterować za pomocą parametru annotations.stem.color , a długością trzonu
– annotations.stem.length . Pamiętaj, że opcja długości trzonu nie ma wpływu na adnotacje o stylu 'line' : w przypadku adnotacji punktu odniesienia 'line' długość trzonu jest zawsze taka sama jak tekst, a w przypadku adnotacji domeny 'line' rdzenia rozciąga się na cały wykres.
Typ: obiekt
Domyślny:kolor to „black”, długość to 5 w przypadku adnotacji domeny i 12 w przypadku adnotacji odniesienia.
|
annotations.style |
W przypadku wykresów obsługujących adnotacje opcja
annotations.style pozwala zastąpić wybrany typ adnotacji przez Wykresy Google. Może to być 'line' lub 'point' .
Typ: ciąg znaków
Domyślnie: „punkt”.
|
annotations.textStyle |
W przypadku wykresów, które obsługują adnotacje, obiekt
annotations.textStyle kontroluje wygląd tekstu adnotacji:
var options = { annotations: { textStyle: { fontName: 'Times-Roman', fontSize: 18, bold: true, italic: true, // The color of the text. color: '#871b47', // The color of the text outline. auraColor: '#d799ae', // The transparency of the text. opacity: 0.8 } } }; Ta opcja jest obecnie obsługiwana w przypadku wykresów warstwowych, słupkowych, kolumnowych, mieszanych, liniowych i punktowych. Nie jest on obsługiwany w wykresie adnotacji . Typ: obiekt
Wartość domyślna:null
|
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”
|
bar.groupWidth |
Szerokość grupy słupków podana w jednym z tych formatów:
Typ: liczba lub ciąg znaków.
Domyślny: złoty współczynnik, czyli około „61,8%”.
|
słupki |
Określa, czy słupki na wykresie słupkowym Materiał są pionowe czy poziome. Ta opcja nie ma wpływu na klasyczne wykresy słupkowe ani klasyczne wykresy kolumnowe. Typ: „level” lub „vertical”
Domyślnie: „vertical”
|
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
|
chart.subtitle |
W przypadku wykresów Material ta opcja określa podtytuł. Napisy są obsługiwane tylko w przypadku list przebojów. Typ: ciąg znaków
Wartość domyślna:null
|
chart.title |
W przypadku wykresów Material (materiały) ta opcja określa tytuł. Typ: ciąg znaków
Wartość domyślna:null
|
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
|
dataOpacity |
Przezroczystość punktów danych – wartość 1,0 oznacza całkowitą nieprzezroczystość, a wartość 0,0 – pełną przezroczystość. Na wykresach punktowych, histogramach, słupkowych i kolumnowych oznacza to widoczne dane: kropki na wykresie punktowym, a na innych prostokątach – prostokąty. Na wykresach, na których wybór danych powoduje utworzenie kropki (np. na wykresach liniowych i warstwowych), odnosi się ona do okręgów widocznych po najechaniu kursorem lub zaznaczeniu. Wykres mieszany prezentuje oba zachowania i ta opcja nie ma wpływu na inne wykresy. Aby dowiedzieć się, jak zmienić przezroczystość linii trendu, przeczytaj o przezroczystości linii trendu . Typ: liczba
Wartość domyślna: 1,0
|
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)
|
explorer |
Opcja Ta funkcja jest eksperymentalna i może się zmienić w kolejnych wersjach. Uwaga: eksplorator działa tylko z ciągłymi osiami (takimi jak liczby lub daty). Typ: obiekt
Wartość domyślna:null
|
explorer.actions |
Eksplorator wykresów Google obsługuje 3 działania:
Typ: tablica ciągów znaków
Domyślne: ['dragToPan', 'rightClickToReset']
|
explorer.axis |
Domyślnie użytkownicy mogą przesuwać widok w poziomie i w pionie, gdy używana jest opcja Typ: ciąg znaków
Domyślne: przesuwanie w poziomie i w pionie
|
explorer.keepInBounds |
Domyślnie użytkownicy mogą przesuwać widok dookoła, niezależnie od tego, gdzie znajdują się dane. Aby mieć pewność, że użytkownicy nie będą przesuwali poza oryginalny wykres, użyj funkcji Typ: wartość logiczna
Wartość domyślna: fałsz.
|
explorer.maxZoomIn |
Wartość maksymalna, którą odkrywca może powiększyć. Domyślnie użytkownicy mogą powiększyć widok na tyle, że zobaczą tylko 25% oryginalnego widoku. Ustawienie Typ: liczba
Wartość domyślna: 0,25
|
explorer.maxZoomOut |
Wartość maksymalna, którą odkrywca może pomniejszyć. Domyślnie użytkownicy mogą pomniejszyć widok na tyle, że wykres zajmował tylko 1/4 dostępnego miejsca. Ustawienie Typ: liczba
Wartość domyślna: 4
|
explorer.zoomDelta |
Gdy użytkownik powiększa lub pomniejsza widok, Typ: liczba
Wartość domyślna: 1,5
|
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.
|
hAxes |
Określa właściwości poszczególnych osi poziomych, jeśli wykres ma wiele osi poziomych. Każdy obiekt podrzędny jest obiektem
Aby określić wykres z wieloma osiami poziomymi, najpierw zdefiniuj nową oś za pomocą funkcji
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 hAxes: { {}, // 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
|
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.baseline |
Punkt odniesienia na osi poziomej. Typ: liczba
Domyślne:automatyczne
|
hAxis.baselineColor |
Kolor punktu odniesienia na osi poziomej. Może to być dowolny ciąg znaków HTML koloru, na przykład Typ: liczba
Domyślny: „black”
|
hAxis.direction |
Kierunek, w którym rosną wartości na osi poziomej. Określ Typ: 1 lub -1
Wartość domyślna: 1
|
hAxis.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
|
hAxis.gridlines |
Obiekt z właściwościami służącymi do konfigurowania linii siatki na osi poziomej. Pamiętaj, że linie siatki na osi poziomej są rysowane w pionie. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w następujący sposób: {color: '#333', minSpacing: 20} Typ: obiekt
Wartość domyślna:null
|
hAxis.gridlines.color |
Kolor poziomych linii siatki w obszarze wykresu. Podaj prawidłowy ciąg znaków HTML koloru. Typ: ciąg znaków
Domyślnie: „#CCC”.
|
hAxis.gridlines.count |
Przybliżona liczba poziomych linii siatki w obszarze wykresu.
Jeśli podasz liczbę dodatnią dla elementu Typ: liczba
Wartość domyślna: -1
|
hAxis.gridlines.units |
Zastępuje domyślny format różnych aspektów typów danych daty, daty, godziny i godziny, gdy są używane z liniami siatki obliczonymi na wykresie. Umożliwia formatowanie lat, miesięcy, dni, godzin, minut, sekund i milisekund. Ogólny format to: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Więcej informacji znajdziesz w sekcji Daty i godziny. Typ: obiekt
Wartość domyślna:null
|
hAxis.minorGridlines |
Obiekt z elementami służącymi do konfigurowania podrzędnych linii siatki na osi poziomej, podobnie jak w przypadku opcji hAxis.gridlines. Typ: obiekt
Wartość domyślna:null
|
hAxis.minorGridlines.color |
Kolor poziomych mniejszych 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.
|
hAxis.minorGridlines.count |
Opcja Typ: liczba
Wartość domyślna: 1
|
hAxis.minorGridlines.units |
Zastępuje domyślny format różnych aspektów danych typu data, godzina i godzina w przypadku używania z wykresami podrzędnymi obliczonymi na wykresie. Umożliwia formatowanie lat, miesięcy, dni, godzin, minut, sekund i milisekund. Ogólny format to: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Więcej informacji znajdziesz w sekcji Daty i godziny. Typ: obiekt
Wartość domyślna:null
|
hAxis.logScale |
Właściwość Typ: wartość logiczna
Wartość domyślna: fałsz.
|
hAxis.scaleType |
Właściwość
Typ: ciąg znaków
Wartość domyślna: null
|
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.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.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.maxValue |
Przenosi maksymalną wartość osi poziomej do określonej wartości. Na większości wykresów będzie to zmiana w prawo. Ignorowana, jeśli ustawiona jest wartość mniejsza niż maksymalna wartość x danych.
Typ: liczba
Domyślne:automatyczne
|
hAxis.minValue |
Przenosi wartość minimalną na osi poziomej do określonej wartości. Na większości wykresów będzie ona ustawiona w lewo. Ignorowana, jeśli ustawiona jest wartość większa niż minimalna wartość x danych.
Typ: liczba
Domyślne:automatyczne
|
hAxis.viewWindowMode |
Określa, jak skalować oś poziomą, 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ą
haxis.viewWindow.min i haxis.viewWindow.max .
|
hAxis.viewWindow |
Określa zakres przycięcia osi poziomej. Typ: obiekt
Wartość domyślna:null
|
hAxis.viewWindow.max |
Maksymalna wartość danych poziomych do renderowania. Ignorowana, gdy atrybut Typ: liczba
Domyślnie automatycznie
|
hAxis.viewWindow.min |
Minimalna wartość danych poziomych do renderowania. 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.pageIndex |
Początkowo wybrany indeks stron legendy liczony od zera. Typ: liczba
Wartość domyślna: 0
|
legend.position |
Pozycja legendy. Użyj jednego z tych rodzajów wartości:
Typ: ciąg znaków
Domyślnie: „right”
|
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.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>}
|
reverseCategories |
Jeśli ma wartość Prawda, seria jest rysowana od dołu do góry. Domyślnie rysowanie odbywa się od góry do dołu. Typ: wartość logiczna
Wartość domyślna: fałsz.
|
orientacja |
Orientacja wykresu. Ustawienie wartości Typ: ciąg znaków
Domyślnie: „poziomo”
|
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”
|
linie trendu |
Wyświetla
linie trendu
na wykresach, które je obsługują. Domyślnie używane są liniowe linie trendu, ale można to dostosować za pomocą opcji
Linie trendów są określane dla poszczególnych serii, więc najczęściej Twoje opcje będą wyglądać tak: var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } Typ: obiekt
Wartość domyślna:null
|
trendlines.n.color |
Kolor linii trendu wyrażony jako angielska nazwa koloru lub ciąg szesnastkowy. Typ: ciąg znaków
Domyślny:domyślny kolor serii.
|
trendlines.n.degree |
W przypadku
linii trendu
wartości Typ: liczba
Wartość domyślna: 3
|
trendlines.n.labelInLegend |
Jeśli jest ustawiona, linia trendu pojawi się w legendzie jako ten ciąg znaków. Typ: ciąg znaków
Wartość domyślna:null
|
trendlines.n.lineWidth |
Szerokość linii linii trendu w pikselach. Typ: liczba
Wartość domyślna: 2
|
trendlines.n.opacity |
Przezroczystość linii trendu w zakresie od 0,0 (przezroczysta) do 1,0 (nieprzezroczysta). Typ: liczba
Wartość domyślna: 1,0
|
trendlines.n.pointSize |
Linie trendów
tworzy się przez wciśnięcie wielu kropek na wykresie. Ta rzadko używana opcja pozwala dostosować rozmiar kropek. Zwykle preferowana będzie opcja Typ: liczba
Wartość domyślna: 1
|
trendlines.n.pointsVisible |
Linie trendów
są tworzone przez przypięcie kilku kropek na wykresie. Opcja Typ: wartość logiczna
Wartość domyślna:true (prawda)
|
trendlines.n.showR2 |
Określa, czy współczynnik determinacji ma być wyświetlany w legendzie lub na etykietce linii trendu. Typ: wartość logiczna
Wartość domyślna: fałsz.
|
trendlines.n.type |
Określa, czy
linie trendu
to Typ: ciąg znaków
Domyślnie: liniowy
|
trendlines.n.visibleInLegend |
Określa, czy równanie linii trendu pojawia się w legendzie. (pojawi się na etykietce linii trendu). Typ: wartość logiczna
Wartość domyślna: fałsz.
|
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ść
Ta opcja jest obsługiwana tylko w przypadku osi 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
Ta opcja jest obsługiwana tylko w przypadku osi 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 daty lub liczb.
W przypadku etykiet osi liczbowej jest to podzbiór formatowania dziesiętnego
Zbiór wzorców ICU
.
Na przykład
W przypadku etykiet osi daty jest to podzbiór formatowania daty
zestaw 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ć
Ta opcja jest obsługiwana tylko w przypadku osi 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}
Ta opcja jest obsługiwana tylko w przypadku osi 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.gridlines.units |
Zastępuje domyślny format różnych aspektów typów danych daty, daty, godziny i godziny, gdy są używane z liniami siatki obliczonymi na wykresie. Umożliwia formatowanie lat, miesięcy, dni, godzin, minut, sekund i milisekund. Ogólny format to: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]}, hours: {format: [/*format strings here*/]}, minutes: {format: [/*format strings here*/]}, seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]} } } Więcej informacji znajdziesz w sekcji Daty i godziny. Typ: obiekt
Wartość domyślna:null
|
vAxis.minorGridlines |
Obiekt z elementami umożliwiającymi konfigurowanie podrzędnych linii siatki na osi pionowej, podobnie jak w przypadku opcji vAxis.gridlines.
Ta opcja jest obsługiwana tylko w przypadku osi 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.minorGridlines.units |
Zastępuje domyślny format różnych aspektów danych typu data, godzina i godzina w przypadku używania z wykresami podrzędnymi obliczonymi na wykresie. Umożliwia formatowanie lat, miesięcy, dni, godzin, minut, sekund i milisekund. Ogólny format to: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Więcej informacji znajdziesz w sekcji Daty i godziny. Typ: obiekt
Wartość domyślna:null
|
vAxis.logScale |
Jeśli ma wartość prawda, oś pionowa jest skalą logarytmiczną. Uwaga: wszystkie wartości muszą być dodatnie.
Ta opcja jest obsługiwana tylko w przypadku osi 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:
Ta opcja jest obsługiwana tylko w przypadku osi 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.
Ta opcja jest obsługiwana tylko w przypadku osi 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.
Ta opcja jest obsługiwana tylko w przypadku osi 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:
Ta opcja jest obsługiwana tylko w przypadku osi 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 |
Ignorowana, gdy atrybut Typ: liczba
Domyślnie automatycznie
|
vAxis.viewWindow.min |
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, które można wybrać, to paski, wpisy z legendy i kategorie.
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, które można wybrać, to paski, wpisy z legendy i kategorie.
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. Słupek odpowiada komórce w tabeli danych, wpisowi legendy do kolumny (indeks wiersza ma wartość null) i kategorię wiersza (indeks kolumny ma wartość null). 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. Słupek odpowiada komórce w tabeli danych, wpisowi legendy do kolumny (indeks wiersza ma wartość null) i kategorię wiersza (indeks kolumny ma wartość null). 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.