Omówienie
Histogram to wykres, który grupuje dane liczbowe w kosze i wyświetla je jako kolumny podzielone na segmenty. Są one używane do rozłożenia zbioru danych: jak często wartości mieszczą się w zakresach.
Wykresy Google automatycznie wybierają zasobniki. Wszystkie kosze mają podobną szerokość i mają wysokość proporcjonalną do liczby punktów danych w zasobniku. Pod innymi względami histogramy są podobne do wykresów kolumnowych.
Przykład
Oto histogram długości dinozaura:
Histogram mówi, że jego najpopularniejszy kontener to mniej niż 10 metrów, a dinozaur ma tylko 40 metrów. Możesz najechać kursorem na słupek, aby sprawdzić, czy to sejsaurus (który może być po prostu bardzo duży Diplodocus; paleontolodzy nie mają pewności).
Kod do generowania tego histogramu jest widoczny poniżej. Po zdefiniowaniu danych (tutaj, w przypadku metody google.visualization.arrayToDataTable
) wykres jest definiowany przez wywołanie google.visualization.Histogram
i narysowany metodą draw
.
<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([ ['Dinosaur', 'Length'], ['Acrocanthosaurus (top-spined lizard)', 12.2], ['Albertosaurus (Alberta lizard)', 9.1], ['Allosaurus (other lizard)', 12.2], ['Apatosaurus (deceptive lizard)', 22.9], ['Archaeopteryx (ancient wing)', 0.9], ['Argentinosaurus (Argentina lizard)', 36.6], ['Baryonyx (heavy claws)', 9.1], ['Brachiosaurus (arm lizard)', 30.5], ['Ceratosaurus (horned lizard)', 6.1], ['Coelophysis (hollow form)', 2.7], ['Compsognathus (elegant jaw)', 0.9], ['Deinonychus (terrible claw)', 2.7], ['Diplodocus (double beam)', 27.1], ['Dromicelomimus (emu mimic)', 3.4], ['Gallimimus (fowl mimic)', 5.5], ['Mamenchisaurus (Mamenchi lizard)', 21.0], ['Megalosaurus (big lizard)', 7.9], ['Microvenator (small hunter)', 1.2], ['Ornithomimus (bird mimic)', 4.6], ['Oviraptor (egg robber)', 1.5], ['Plateosaurus (flat lizard)', 7.9], ['Sauronithoides (narrow-clawed lizard)', 2.0], ['Seismosaurus (tremor lizard)', 45.7], ['Spinosaurus (spiny lizard)', 12.2], ['Supersaurus (super lizard)', 30.5], ['Tyrannosaurus (tyrant lizard)', 15.2], ['Ultrasaurus (ultra lizard)', 30.5], ['Velociraptor (swift robber)', 1.8]]); var options = { title: 'Lengths of dinosaurs, in meters', legend: { position: 'none' }, }; var chart = new google.visualization.Histogram(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Etykiety (nazwy dinozaurów) mogą zostać pominięte. W takim przypadku etykietki będą wyświetlać tylko wartość liczbową.
Kontrola kolorów
Histogram narodowy:
W ponad 200 krajach mieszka mniej niż stoset milionów, a później następuje duży spadek.
Ten histogram korzysta z opcji colors
, aby rysować dane na zielono:
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['green'], };
Tak jak w przypadku wszystkich wykresów Google, kolory można określić jako nazwy angielskie lub wartości szesnastkowe.
Zarządzanie zasobnikami
Domyślnie Wykresy Google automatycznie wybierają rozmiar zasobnika przy użyciu dobrze znanego algorytmu histogramów. Czasem trzeba to jednak zastąpić, a powyższy wykres to tylko przykład. W jednym kraju ciężko jest zapoznać się z wieloma krajami.
W takich sytuacjach wykres histogramu ma 2 opcje: histogram.bucketSize
, który zastępuje algorytm i zakoduje na stałe rozmiar zasobnika, oraz opcję histogram.lastBucketPercentile
. Druga opcja wymaga dokładniejszego wyjaśnienia: zmienia obliczenie rozmiarów zasobników, aby zignorować wartości, które są wyższe lub niższe od podanych wartości procentowych. Wartości są nadal uwzględniane na histogramie, ale nie mają wpływu na sposób ich zgrupowania. Jest to przydatne, gdy nie chcesz, aby wyniki odstające znajdowały się we własnych zasobnikach. Będą one grupowane według pierwszego lub ostatniego zasobnika.
Na powyższym wykresie podczas obliczania rozmiaru zasobnika zignorowaliśmy pięć górnych i dolnych 5 wartości. Wartości nadal są wyświetlane na wykresie. Jedyne, co się zmieniło, to rozmiar zasobnika, ale jego histogram jest bardziej czytelny.
Ten przykład pokazuje też, jak zmienić skalę osi pionowej, aby użyć skalowania „lustrach”, co jest też pomocne przy tworzeniu wykresu z długim otworem małych wartości.
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['#e7711c'], histogram: { lastBucketPercentile: 5 }, vAxis: { scaleType: 'mirrorLog' } };
Jak widać, usunięcie z góry i dołu pięciu procentów spowodowało obliczenie rozmiaru 10 000 000, a nie 100 000 000. Jeśli wiesz, że z zasobnikiem ma rozmiar 10 000 000, możesz to zrobić za pomocą histogram.bucketSize
:
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['#e7711c'], histogram: { bucketSize: 10000000 } };
W poniższym przykładzie pokazujemy, jak rozszerzyć zakres zasobników i wyświetlić więcej zasobników bez przerwy między nimi. Za pomocą opcji maxNumBuckets
można zwiększyć domyślną liczbę zasobników. Opcje histogram.minValue
i histogram.maxValue
zwiększą zakres zasobników, ale pamiętaj, że jeśli dane znajdują się poza tym zakresem, opcje te nie zmniejszą się.
Ten przykład pokazuje też, że możesz określić znaczniki wyświetlania dla każdego zasobnika za pomocą opcji ticks
dla atrybutu hAxis
. Nie ma to wpływu na same zasobniki, ale tylko na sposób wyświetlania znaczników.
Pamiętaj też, że określono właściwość chartArea.width
, dzięki czemu liczba zasobników będzie pasować lepiej bez artefaktów wizualnych. Oto opcje z tego przykładu.
var options = { title: 'Approximating Normal Distribution', legend: { position: 'none' }, colors: ['#4285F4'], chartArea: { width: 405 }, hAxis: { ticks: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1] }, bar: { gap: 0 }, histogram: { bucketSize: 0.01, maxNumBuckets: 400, minValue: -1, maxValue: 1 } };
Wiele serii
Oto histogram przedstawiający ładunki cząstek jądrowych zgodnie z modelem standardowym:
Powyższy wykres przedstawia serie wszystkich cząstek. Cząstki podatomowe można podzielić na 4 grupy: kwarce, leptony i bozony. Potraktujmy każdy z nich jako osobną serię:
Na tym wykresie pokazujemy różne serie (a także kolory) dla każdego z 4 typów cząstek jądrowych. Jasno ustawiamy interpolateNulls
na false
, by mieć pewność, że puste wartości (niepotrzebny, bo seria ma jednakową długość) nie są pokazane. Ustawiamy też legend.maxLines
, aby dodać kolejny wiersz do legendy:
var data = google.visualization.arrayToDataTable([ ['Quarks', 'Leptons', 'Gauge Bosons', 'Scalar Bosons'], [2/3, -1, 0, 0], [2/3, -1, 0, null], [2/3, -1, 0, null], [-1/3, 0, 1, null], [-1/3, 0, -1, null], [-1/3, 0, null, null], [-1/3, 0, null, null] ]); var options = { title: 'Charges of subatomic particles', legend: { position: 'top', maxLines: 2 }, colors: ['#5C3292', '#1A8763', '#871B47', '#999999'], interpolateNulls: false, };
Wczytuję
Nazwa pakietu google.charts.load
to "corechart"
.
google.charts.load("current", {packages: ["corechart"]});
Nazwa klasy wizualizacji to google.visualization.Histogram
:
var visualization = new google.visualization.Histogram(container);
Format danych
Dane na histogramie można uzupełnić na 2 sposoby. Jeśli jest tylko jedna seria:
var data = google.visualization.arrayToDataTable([ ['Name', 'Number'], ['Name 1', number1], ['Name 2', number2], ['Name 3', number3], ... ]);
...jeśli jest wiele serii:
var data = google.visualization.arrayToDataTable([ ['Series Name 1', 'Series Name 2', 'Series Name 3', ...], [series1_number1, series2_number1, series3_number1, ...], [series1_number2, series2_number2, series3_number2, ...], [series1_number3, series2_number3, series3_number3, ...], ... ]);
Nie są obecnie obsługiwane żadne opcjonalne role w histogramach.
Opcje konfiguracji
Nazwa | |
---|---|
animacja.czas trwania |
Czas trwania animacji w milisekundach. Szczegółowe informacje znajdziesz w dokumentacji animacji. Typ: liczba
Wartość domyślna: 0
|
animacja.wygładzanie |
Funkcja wygładzania zastosowana w animacji. Dostępne są te opcje:
Typ: ciąg znaków
Domyślnie: „linear”
|
animacje.startup, |
Określa, czy wykres będzie animowany podczas pierwszego rysowania. Jeśli Typ: wartość logiczna
Default (Fałsz) – wartość domyślna
|
Położenietytułu osi |
Położenie tytułów osi w porównaniu z miejscami na wykresie. Obsługiwane wartości:
Typ: ciąg znaków
Domyślny: „out”
|
backgroundColor, |
Kolor tła głównego obszaru wykresu. Może to być prosty ciąg kolorów HTML, taki jak Typ: ciąg znaków lub obiekt
Domyślny: „biały”.
|
backgroundColor.type |
Kolor obramowania wykresu w postaci ciągu kolorów HTML. Typ: ciąg znaków
Domyślne: „#666”
|
backgroundColor.rayWidth |
Szerokość obramowania w pikselach. Typ: liczba
Wartość domyślna: 0
|
backgroundColor.fill |
Kolor wypełnienia wykresu w postaci koloru HTML. Typ: ciąg znaków
Domyślny: „biały”.
|
bar.grupaSzerokość |
Szerokość grupy pasków określona w jednym z tych formatów:
Typ: liczba lub ciąg
Domyślny: złoty współczynnik, ok. „61,8%”.
|
obszarGraficzny |
Obiekt z użytkownikami do konfigurowania położenia i rozmiaru obszaru wykresu (tam, gdzie rysowany jest sam wykres, z wyłączeniem osi i legend). Obsługiwane są 2 formaty: liczba lub liczba, po której następuje %. Prosta liczba to wartość w pikselach. Liczba, po której następuje %, to wartość procentowa. Przykład: Typ: obiekt
Domyślne: null
|
chartArea.backgroundColor. |
Kolor tła wykresu. Ciąg może być ciągiem szesnastkowym (np. „#fdc”) lub angielskiej nazwy koloru. Podczas korzystania z tych obiektów możesz podać te właściwości:
Typ: ciąg znaków lub obiekt
Domyślny: „biały”.
|
wykresArea.left |
Odległość, jaka ma być używana do rysowania wykresu od lewej krawędzi. Typ: liczba lub ciąg
Ustawienie domyślne: automatyczne
|
wykresArea.top |
Odległość, w jakiej znajduje się wykres od górnej krawędzi. Typ: liczba lub ciąg
Ustawienie domyślne: automatyczne
|
chartArea.width |
Szerokość obszaru wykresu. Typ: liczba lub ciąg
Ustawienie domyślne: automatyczne
|
wykresArea.height |
Wysokość obszaru wykresu. Typ: liczba lub ciąg
Ustawienie domyślne: automatyczne
|
kolory |
Kolory elementów wykresu. Tablica ciągów znaków, w których każdy jest ciągiem koloru HTML, np. Typ: Tablica ciągów znaków
Domyślny: kolory domyślne.
|
ochroność danych |
Przezroczystość punktów danych – 1,0 jest całkowicie nieprzejrzysty, a 0,0 – całkowicie przezroczysty. Na wykresach punktowych, histogramach, słupkach i kolumnach dotyczy to widocznych danych: kropek na wykresie rozproszonym i prostokątów w innych. W przypadku wykresów, na których wybór danych tworzy kropkę, np. wykres liniowy lub warstwowy, dotyczy to okręgów, które pojawiają się po najechaniu kursorem lub zaznaczeniem. Wykres mieszany pokazuje oba rodzaje zachowań i ta opcja nie ma wpływu na inne wykresy. Aby zmienić przezroczystość linii trendu, zobacz przezroczystość linii trendu. Typ: liczba
Domyślna: 1.0
|
włącz interfejs interaktywny |
Określa, czy wykres generuje zdarzenia oparte na użytkownikach lub reaguje na ich interakcje. Jeśli ma wartość false (fałsz), wykres nie zwróci zdarzenia wyboru ani innych zdarzeń związanych z interakcją (ale będzie zwracać zdarzenia lub błędy) ani nie będzie zawierać tekstu wyświetlanego po najechaniu kursorem ani innego działania w zależności od danych wejściowych użytkownika. Typ: wartość logiczna
Wartość domyślna: true
|
cel główny |
Typ jednostki, która otrzymuje kursor myszy. Ma też wpływ na to, który element jest wybierany przez kliknięcie myszą, a który element tabeli danych jest powiązany ze zdarzeniami. Może to być:
W polu „target” (grupa docelowa) etykietka zawiera wszystkie wartości kategorii. Może to być przydatne do porównywania wartości różnych serii. Typ: ciąg znaków
Domyślny: „datum”
|
rozmiar czcionki |
Domyślny rozmiar czcionki całego tekstu na wykresie (w pikselach). Możesz zastąpić tę opcję, używając właściwości określonych elementów wykresu. Typ: liczba
Domyślna:automatycznie.
|
Czcionka |
Domyślny krój czcionki całego tekstu na wykresie. Możesz zastąpić tę opcję, używając właściwości określonych elementów wykresu. Typ: ciąg znaków
Domyślny: „solarmora”
|
forceIFrame |
Rysuje wykres wewnątrz wbudowanej ramki. (Pamiętaj, że ta opcja jest ignorowana w IE8 – wszystkie wykresy IE8 są ujęte w ramki iFrame). Typ: wartość logiczna
Wartość domyślna: false
|
Oś h |
Obiekt z członkami, który służy do konfigurowania różnych elementów osi poziomej. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w sposób przedstawiony poniżej: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } Typ: obiekt
Domyślne: null
|
Linia hAxis.gridline |
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 pionowo. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w sposób przedstawiony poniżej: {color: '#333', minSpacing: 20} Typ: obiekt
Domyślne:null
|
Oś hA.grid.color |
Kolor poziomych linii siatki w obszarze wykresu. Podaj prawidłowy ciąg kolorów HTML. Typ: ciąg znaków
Domyślny: „#CCC”
|
gAxis.gridlines.count |
Przybliżona liczba poziomych linii siatki w obszarze wykresu.
Jeśli podasz liczbę dodatnią dla formuły Typ: liczba
Wartość domyślna: -1
|
xAxis.gridlines.interval |
Tablica rozmiarów (jako wartości danych, a nie piksele) między sąsiednimi siatkami. W tej chwili ta opcja dotyczy tylko osi numerycznych, ale jest to odpowiednik opcji Typ: liczba od 1 do 10 (z wyłączeniem 10).
Wartość domyślna: obliczona
|
xAxis.gridlines.minSpacing, |
Minimalny odstęp ekranu (w pikselach) między głównymi liniami hAxis.
Domyślnym ustawieniem głównych linii siatki jest Typ: liczba
Wartość domyślna: obliczona
|
xAxis.gridlines.multiple |
Wszystkie wartości siatki i znaczników muszą być wielokrotnością wartości tej opcji. Pamiętaj, że w przeciwieństwie do interwałów, moc 10-krotność wielokrotności nie jest brana pod uwagę.
Aby wymusić znaczniki wyboru jako liczby całkowite, podaj Typ: liczba
Wartość domyślna: 1
|
xAxis.gridlines.units |
Zastępuje domyślny format różnych typów danych typu data/data/godzina, gdy są używane na podstawie obliczonych linii siatki. 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*/]}, } } Dodatkowe informacje znajdziesz w artykule Daty i godziny. Typ: obiekt
Domyślne: null
|
Linie siatki xAxis.minorGridline |
Obiekt z użytkownikami do konfigurowania mniejszych linii siatki na osi poziomej, podobnie jak w przypadku opcji hAxis.gridlines. Typ: obiekt
Domyślne: null
|
xAxis.minorGridlines.color |
Kolor poziomych linii siatki w obszarze wykresu. Podaj prawidłowy ciąg kolorów HTML. Typ: ciąg znaków
Domyślne:połączenie kolorów siatki i tła.
|
hAxis.minorGridlines.count, |
Opcja Typ: liczba
Wartość domyślna: 1
|
hAxis.minorGridlines.interval |
Opcja majorGridlines.interval jest podobna do opcji odstępów głównych linii siatki, ale wybrany przedział jest zawsze równym dzielnikiem głównych linii siatki.
Domyślny przedział na wagach liniowych to Typ: liczba
Wartość domyślna: 1
|
hAxis.minorGridlines.minSpacing, |
Minimalny wymagany odstęp (w pikselach) między sąsiednimi mniejszymi liniami siatki oraz między siatką a dużą siatką. Wartość domyślna to 1/2 minSpacing mainline of line lines for skale linearne i 1/5 minSpacing for log scales. Typ: liczba
Wartość domyślna: obliczona
|
hAxis.minorGridlines.multiple |
To samo co w przypadku wersji głównej Typ: liczba
Wartość domyślna: 1
|
xAxis.minorGridlines.units |
Zastępuje domyślny format różnych typów danych typu data/data/godzina, gdy są używane na podstawie obliczonych linii podrzędnych siatki. 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*/]}, } } Dodatkowe informacje znajdziesz w artykule Daty i godziny. Typ: obiekt
Domyślne:null
|
Oś hAxis.text |
Położenie tekstu na osi poziomej względem obszaru wykresu. Obsługiwane wartości: „out”, „in”, „none”. Typ: ciąg znaków
Domyślny: „out”
|
xAxis.textStyle |
Obiekt określający styl tekstu na osi poziomej. Obiekt ma taki 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>}
|
xAxis.title, |
Właściwość Typ: ciąg znaków
Domyślne: null
|
xAxis.titleTextStyle |
Obiekt określający styl tekstu tytułu na osi poziomej. Obiekt ma taki 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>}
|
Licencja hAxis.allowContainerBoundaryTextcut |
Jeśli ma wartość Fałsz, zewnętrzne etykiety są ukrywane, a nie przycinane przez kontener wykresu. Jeśli ustawisz wartość prawda, przycinanie etykiet będzie możliwe. Typ: wartość logiczna
Wartość domyślna: false
|
xAxis.slantedText |
Jeśli wartość to prawda, narysuj tekst osi poziomej pod kątem. W ten sposób możesz zmieścić na osi więcej tekstu, a w przeciwnym razie narysuj tekst osi pionowej. Domyślnym zachowaniem jest nieprzychylny tekst, jeśli po najechaniu na całość nie mieści się on w całości. Pamiętaj, że ta opcja jest dostępna tylko wtedy, gdy Typ: wartość logiczna
Domyślna:automatycznie.
|
Obiekty hAxis.slantedTextAngle |
Kąt tekstu na osi poziomej (jeśli jest skośny). Ignorowana, jeśli element Typ: liczba -90–90
Wartość domyślna: 30
|
xAxis.maxAlternation |
Maksymalna liczba poziomów tekstu na osi poziomej. Jeśli etykiety tekstu na osi staną się zbyt zatłoczone, serwer może przesunąć sąsiadujące etykiety w górę lub w dół, aby zmieścić je bliżej. Ta wartość określa największą liczbę poziomów do wykorzystania. Jeśli etykiety pasują do siebie bez nakładania się, serwer może stosować ich mniej. W przypadku dat i godzin domyślna wartość wynosi 1. Typ: liczba
Wartość domyślna: 2
|
xAxis.maxTextLine |
Maksymalna dozwolona liczba wierszy w etykietach tekstowych. Etykiety mogą obejmować wiele wierszy, jeśli są zbyt długie, a liczba wierszy jest domyślnie ograniczona przez wysokość dostępnego miejsca. Typ: liczba
Ustawienie domyślne: automatyczne
|
xAxis.minTextSpacing, |
Minimalne odstępy w poziomie (w pikselach) między 2 przylegającymi etykietami tekstu. Jeśli etykiety są zbyt gęsto rozmieszczone lub są zbyt długie, odstępy te mogą spaść poniżej tego progu i w tym przypadku zostanie zastosowane jedno z rozwiązań umożliwiających rozmycie etykiet (np.obcięcie etykiet lub usunięcie ich niektórych). Typ: liczba
Wartość domyślna: wartość
hAxis.textStyle.fontSize |
hAxis.showTextCo |
Liczba etykiet osi poziomej (1 oznacza każdą etykietę, 2 oznacza każdą inną etykietę itd.). Domyślnie wyświetlane są jak najwięcej etykiet bez nakładania się. Typ: liczba
Domyślna: automatycznie.
|
Tryb xAxis.viewWindow |
Określa, jak skaluje oś poziomą, aby renderować wartości na obszarze wykresu. Obsługiwane są te wartości ciągów:
Typ: ciąg znaków
Domyślny: odpowiednik „ładne”, ale jeśli mają one pierwszeństwo,
haxis.viewWindow.min i haxis.viewWindow.max mają pierwszeństwo.
|
Widok xA.is |
Określa zakres przycięcia osi poziomej. Typ: obiekt
Domyślne: null
|
Oś hx.viewWindow.max |
Indeks wiersza oparty na zero, w którym kończy się okno przycinania. Punkty danych w tym indeksie lub wyższym zostaną przycięte. W połączeniu z wartością Ignorowany, gdy Typ: liczba
Ustawienie domyślne: automatyczne
|
xAxis.viewWindow.min |
Indeks wiersza oparty na zero, od którego rozpoczyna się okno przycinania. Punkty danych znajdujące się poniżej indeksów będą przycięte. W połączeniu z wartością Ignorowany, gdy Typ: liczba
Ustawienie domyślne: automatyczne
|
histogram.bucketSize |
Określ wielkość każdego histogramu na stałe, zamiast określania go za pomocą algorytmu. Typ: liczba
Ustawienie domyślne: automatyczne
|
histogram.hideBucketItems |
Pomiń cienkie podziały między blokami histogramu, tworząc serię ciągów. Typ: wartość logiczna
Wartość domyślna: false
|
histogram.lastBucketPercentile, |
Podczas obliczania rozmiaru zasobnika histogramu zignoruj górny i dolny Typ: liczba
Wartość domyślna: 0
|
histogram.minValue |
Rozszerz zakres zasobników, aby uwzględnić tę wartość. Typ: liczba
Domyślny:automatyczny – użyj danych min.
|
histogram.maxValue |
Rozszerz zakres zasobników, aby uwzględnić tę wartość. Typ: liczba
Wartość domyślna: automatyczne – korzystaj z maks. ilości danych
|
histogram.numBucketsRule (histtogram.numBucketsRule) |
Jak obliczyć domyślną liczbę zasobników. Możliwe wartości to:
Typ: ciąg znaków
Domyślny:
'sqrt' |
wysokość |
Wysokość wykresu w pikselach. Typ: liczba
Domyślna:wysokość elementu, który go zawiera.
|
interpolateNulls, interpolateNulls, interpolateNulls, interpolateNulls |
Określa, czy wartość brakujących punktów jest znana. Jeśli prawda, szacuje wartość brakujących danych na podstawie sąsiednich punktów. Jeśli wartość to fałsz, w nieznanym punkcie zostanie przerwana.
W przypadku wykresów obszarowych z opcją Typ: wartość logiczna
Wartość domyślna: false
|
Jest skumulowany |
Jeśli ma wartość Prawda, łączy elementy wszystkich serii w każdej wartości domeny. Uwaga: na wykresach Kolumna, Obszar i Etap krokowy Wykresy Google odwracają kolejność legend, aby lepiej pasowały do stosu elementów serii (np. seria 0 jest najniższym elementem legendy). Nie dotyczy to wykresów barowych.
Opcja Opcje dla
W przypadku nakładania 100% obliczona wartość każdego elementu jest widoczna w etykietce po rzeczywistej wartości.
Oś docelowa domyślnie ustawia wartości zależne od skali 0–1 jako ułamki 1 w przypadku
skumulowane 100% obsługuje tylko wartości danych typu Typ: wartość logiczna / ciąg znaków
Wartość domyślna: false
|
legenda |
Obiekt z użytkownikami do konfigurowania różnych aspektów legendy. Aby określić właściwości tego obiektu, możesz użyć zapisu dosłownego obiektu, jak pokazano tutaj: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Typ: obiekt
Domyślne: null
|
legend.alignment, |
Wyrównanie legendy. Użyj jednego z tych rodzajów wartości:
Początek, środek i koniec są zależne od stylu legendy (pionowa lub pozioma). Na przykład w legendzie „prawa” odpowiednio „start” i „koniec” znajdują się odpowiednio u góry i u dołu. W przypadku legendy „górny”, „start” i „koniec” znajdziesz odpowiednio po lewej i prawej stronie obszaru. Wartość domyślna zależy od pozycji legendy. W przypadku legend „bottom” domyślną wartością jest „center”, a w innych legendach – „start”. Typ: ciąg znaków
Domyślna:automatycznie.
|
legend.maxLines |
Maksymalna liczba wierszy w legendzie. Ustaw większą liczbę niż 1, aby dodać wiersze do legendy. Uwaga: dokładna logika używana do określenia rzeczywistej liczby renderowanych linii jest nadal zmienna. Ta opcja obecnie działa tylko wtedy, gdy pole legend.position ma wartość „top”. Typ: liczba
Wartość domyślna: 1
|
legend.pageIndex |
Początkowo wybrany indeks oparty na zerowej stronie legendy. 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ślny: „right”
|
legend.textStyle, |
Obiekt określający styl tekstu legendy. Obiekt ma taki 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>}
|
orientacja |
Orientacja wykresu. Jeśli ustawisz wartość Typ: ciąg znaków
Wartość domyślna: „pozioma”
|
odwrócone kategorie |
Jeśli zasada ma wartość Prawda, seria jest rysowana od prawej do lewej. Domyślne ustawienie to rysowanie od lewej do prawej. Typ: wartość logiczna
Wartość domyślna: false
|
seriale |
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 seria lub wartość nie jest określona, 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 dotyczy serii, w określonej kolejności, lub obiekt, w którym każdy element podrzędny ma klucz numeryczny, który wskazuje serię. Na przykład te 2 deklaracje są identyczne, deklarując pierwszą serię jako czarną i nieobecną w legendie, a czwartą jako czerwoną i nieobecną w legendie: 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
Domyślnie: {}
|
motyw |
Motyw to zestaw wstępnie zdefiniowanych wartości opcji, które współdziałają ze sobą, aby osiągnąć określone zachowanie wykresu lub efektu wizualnego. Obecnie dostępny jest tylko jeden motyw:
Typ: ciąg znaków
Domyślne:null
|
tytuł |
Tekst do wyświetlenia nad wykresem. Typ: ciąg znaków
Domyślnie: bez tytułu.
|
Stanowisko |
Porównanie tytułu wykresu z obszarem obszaru wykresu. Obsługiwane wartości:
Typ: ciąg znaków
Domyślny: „out”
|
stylTextTextStyle |
Obiekt określający styl tekstu tytułu. Obiekt ma taki 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 członkami, który służy do konfigurowania różnych elementów etykietek. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w sposób przedstawiony poniżej: {textStyle: {color: '#FF0000'}, showColorCode: true} Typ: obiekt
Domyślne: null
|
tooltip.isHtml |
Jeśli ma wartość Prawda, używaj etykiet z renderowaniem HTML (a nie z elementami renderowanymi w formacie SVG). Więcej informacji znajdziesz w artykule Dostosowywanie zawartoś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: false
|
tooltip.showColorCode |
Jeśli ma wartość true (prawda), obok informacji o serii w etykietce pokazuj kolorowe kwadraty. Wartość domyślna to „true”, gdy Typ: wartość logiczna
Domyślna: automatycznie.
|
tooltip.textStyle |
Obiekt określający styl tekstu etykietki. Obiekt ma taki 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ślny: „focus”
|
vAxes, |
Określa właściwości poszczególnych osi pionowych, jeśli wykres ma kilka osi.
Każdy obiekt podrzędny to obiekt
Aby określić wykres z wieloma osiami pionowymi, najpierw zdefiniuj nową oś za pomocą { series: { 2: { targetAxisIndex:1 } }, vAxes: { 1: { title:'Losses', textStyle: {color: 'red'} } } }
Ta właściwość może być obiektem lub tablicą: jest to zbiór obiektów każdy z etykietą liczbową określającą oś – jest to format przedstawiony powyżej; tablica to tablica obiektów, po jednym na osi. Na przykład ta notacja w stylu tablicy jest identyczna jak obiekt vAxes: [ {}, // Nothing specified for axis 0 { title:'Losses', textStyle: {color: 'red'} // Axis 1 } ] Typ: tablica obiektów lub obiektów podrzędnych
Domyślne:null
|
Oś vs |
Obiekt z członkami, który służy do konfigurowania różnych elementów osi pionowej. Aby określić właściwości tego obiektu, możesz użyć zapisu dosłownego obiektu, jak pokazano tutaj: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Typ: obiekt
Domyślne:null
|
Wartość vAxis.baseline |
Właściwość Typ: liczba
Domyślna: automatycznie.
|
KolorAxis.baseline |
Określa kolor punktu odniesienia dla osi pionowej. Może to być dowolny ciąg kolorów HTML, np. Typ: liczba
Domyślny: „czarny”.
|
OśAvis.direction |
Kierunek, w którym rosną wartości na osi pionowej. Domyślnie niskie wartości znajdują się u dołu wykresu. Określ Typ: 1 lub -1
Wartość domyślna: 1
|
PlikAVIS.format |
Formatujący ciąg etykiet liczbowych. Jest to podzbiór wzorca ICU.
Na przykład w polu
Rzeczywiste formatowanie zastosowane do etykiety pochodzi z języka, w którym został załadowany interfejs API. Więcej informacji znajdziesz w artykule na temat ładowania wykresów z określonego regionu.
W obliczeniu wartości znaczników linii siatki i kilku linii siatki uwzględnianych jest kilka alternatywnych kombinacji wszystkich odpowiednich opcji linii. Alternatywne wersje zostaną odrzucone, jeśli sformatowane etykiety znaczników będą zduplikowane lub nakładają się.
Możesz więc określić Typ: ciąg znaków
Ustawienie domyślne: automatyczne
|
Linie siatki vAxis.grid |
Obiekt z członkami, który służy do konfigurowania linii siatki na osi pionowej. Pamiętaj, że linie siatki osi pionowej są rysowane w poziomie. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w sposób przedstawiony poniżej: {color: '#333', minSpacing: 20} Typ: obiekt
Domyślne:null
|
OśA.vsiat.grid.color |
Kolor pionowych linii siatki wewnątrz obszaru wykresu. Określ prawidłowy ciąg kolorów HTML. Typ: ciąg znaków
Domyślny: „#CCC”
|
OśAvis.grid.count |
Przybliżona liczba poziomych linii siatki w obszarze wykresu.
Jeśli podasz liczbę dodatnią dla formuły Typ: liczba
Wartość domyślna: -1
|
OśAvis.grid.interval |
Tablica rozmiarów (jako wartości danych, a nie piksele) między sąsiednimi siatkami. W tej chwili ta opcja dotyczy tylko osi numerycznych, ale jest to odpowiednik opcji Typ: liczba od 1 do 10 (z wyłączeniem 10).
Wartość domyślna: obliczona
|
Oś vAxis.gridlines.minSpacing |
Minimalny odstęp ekranu (w pikselach) między głównymi liniami hAxis.
Domyślnym ustawieniem głównych linii siatki jest Typ: liczba
Wartość domyślna: obliczona
|
OśAvs.grid.multiple |
Wszystkie wartości siatki i znaczników muszą być wielokrotnością wartości tej opcji. Pamiętaj, że w przeciwieństwie do interwałów, moc 10-krotność wielokrotności nie jest brana pod uwagę.
Aby wymusić znaczniki wyboru jako liczby całkowite, podaj Typ: liczba
Wartość domyślna: 1
|
Oś vas.grid.units |
Zastępuje domyślny format różnych typów danych typu data/data/godzina, gdy są używane na podstawie obliczonych linii siatki. 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*/]} } } Dodatkowe informacje znajdziesz w artykule Daty i godziny. Typ: obiekt
Domyślne:null
|
Linie siatki vAxis.minorGrids |
Obiekt z użytkownikami do konfigurowania mniejszych linii siatki na osi pionowej, podobnie jak w przypadku opcji vAxis.gridlines. Typ: obiekt
Domyślne: null
|
Oś v.is.minor.net.kolor |
Kolor pionowych linii siatki wewnątrz obszaru wykresu. Podaj prawidłowy ciąg kolorów HTML. Typ: ciąg znaków
Domyślne:połączenie kolorów siatki i tła.
|
vAxis.minorGridlines.count, |
Opcja generalGridlines.count jest w większości wycofana. Wyjątkiem jest wyłączenie podrzędnych linii siatki przez ustawienie licznika na 0. Liczba mniejszych linii siatki zależy od przedziału 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.interval, |
Opcja majorGridlines.interval jest podobna do opcji odstępów głównych linii siatki, ale wybrany przedział jest zawsze równym dzielnikiem głównych linii siatki.
Domyślny przedział na wagach liniowych to Typ: liczba
Wartość domyślna: 1
|
xAxis.minorGridlines.minSpacing, |
Minimalny wymagany odstęp (w pikselach) między sąsiednimi mniejszymi liniami siatki oraz między siatką a dużą siatką. Wartość domyślna to 1/2 minSpacing mainline of line lines for skale linearne i 1/5 minSpacing for log scales. Typ: liczba
Wartość domyślna: obliczona
|
Oś vAxis.minorGridline.multiple |
To samo co w przypadku wersji głównej Typ: liczba
Wartość domyślna: 1
|
xAxis.minorGridlines.units |
Zastępuje domyślny format różnych typów danych typu data/data/godzina, gdy są używane na podstawie obliczonych linii podrzędnych siatki. 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*/]}, } } Dodatkowe informacje znajdziesz w artykule Daty i godziny. Typ: obiekt
Domyślne: null
|
vAxis.logScale |
Jeśli ma wartość true (prawda), oś pionowa jest skalą logarytmiczną. Uwaga: wszystkie wartości muszą być dodatnie. Typ: wartość logiczna
Wartość domyślna: false
|
TypAxis.scale |
Właściwość
Typ: ciąg znaków
Domyślne: null
|
Oś vAxis.text |
Położenie tekstu na osi pionowej względem obszaru wykresu. Obsługiwane wartości: „out”, „in”, „none”. Typ: ciąg znaków
Domyślny: „out”
|
StylAxis.text |
Obiekt określający styl tekstu na osi pionowej. Obiekt ma taki 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>}
|
PlikAxis.ticks |
Zastępuje automatycznie generowane znaczniki osi Y określoną tablicą. Każdy element tablicy powinien być prawidłową wartością znacznika (np. liczbą, datą, datą lub godziną) lub obiektem. Jeśli jest to obiekt, powinien mieć właściwość
Wartość ViewWindow zostanie automatycznie rozwinięta, tak by obejmowała wartości minimalne i maksymalne, chyba że określisz Przykłady:
Typ: tablica elementów
Ustawienie domyślne: automatyczne
|
OśAvis.title |
Właściwość Typ: ciąg znaków
Domyślnie: bez tytułu.
|
StylAxis.titleTextText |
Obiekt określający styl tekstu tytułu osi pionowej. Obiekt ma taki 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>}
|
Wartość xAxis.max |
Przenosi maksymalną wartość osi pionowej do określonej wartości. W przypadku większości wykresów będzie ona większa. Ignorowane, jeśli ta wartość jest ustawiona na wartość mniejszą niż maksymalna wartość y danych.
Typ: liczba
Domyślna:automatycznie.
|
WartośćAxis.minValue |
Przenosi minimalną wartość osi pionowej do określonej wartości – w przypadku większości wykresów będzie ona niższa. Ignorowane, jeśli ta wartość jest ustawiona na wartość większą niż minimalna wartość y.
Typ: liczba
Domyślne:null
|
TrybAvis.viewWindow |
Określa, jak skaluje oś pionową, aby renderować wartości w obszarze wykresu. Obsługiwane są te wartości ciągów:
Typ: ciąg znaków
Domyślny: odpowiednik „ładne”, ale jeśli mają one pierwszeństwo,
vaxis.viewWindow.min i vaxis.viewWindow.max mają pierwszeństwo.
|
Oś-v.is.is |
Określa zakres przycięcia osi pionowej. Typ: obiekt
Domyślne: null
|
Oś v.axis.max |
Maksymalna wartość pionowych danych. Ignorowany, gdy Typ: liczba
Ustawienie domyślne: automatyczne
|
Axis.viewWindow.min |
Minimalna wartość danych pionowych do renderowania. Ignorowany, gdy Typ: liczba
Ustawienie domyślne: automatyczne
|
szerokość |
Szerokość wykresu w pikselach. Typ: liczba
Domyślna – szerokość elementu, który zawiera.
|
Metody
Metoda | |
---|---|
draw(data, options) |
Rysuje wykres. Wykres akceptuje dalsze wywołania metody dopiero po wywołaniu zdarzenia Typ zwrotu: brak
|
getAction(actionID) |
Zwraca obiekt działania etykietki z wymaganym parametrem Typ zwrotu: obiekt
|
getBoundingBox(id) |
Zwraca obiekt zawierający lewą, górną, szerokość i wysokość elementu wykresu
Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu. Typ zwrotu: obiekt
|
getChartAreaBoundingBox() |
Zwraca obiekt zawierający lewą, górną, szerokość i wysokość zawartości wykresu (tzn. z wyłączeniem etykiet i legend):
Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu. Typ zwrotu: obiekt
|
getChartLayoutInterface() |
Zwraca obiekt zawierający informacje o umieszczonym na ekranie miejscu na wykresie i jego elementach. W zwróconym obiekcie można wywołać te metody:
Wywołuj je po narysowaniu wykresu. Typ zwrotu: obiekt
|
getHAxisValue(xPosition, optional_axis_index) |
Zwraca poziomą wartość danych w miejscu Przykład: Wywołuj je po narysowaniu wykresu. Typ zwrotu: numer
|
getImageURI() |
Zwraca wykres zserializowany jako identyfikator URI obrazu. Wywołuj je po narysowaniu wykresu. Patrz Drukowanie wykresów PNG. Typ zwrotu: ciąg znaków
|
getSelection() |
Zwraca tablicę wybranych elementów wykresu.
Elementy, które można wybrać, to paski, legendy i kategorie.
Na tym wykresie w danym momencie możesz wybrać tylko 1 element.
Typ zwrotu: tablica elementów wyboru.
|
getVAxisValue(yPosition, optional_axis_index) |
Zwraca pionową wartość danych w miejscu Przykład: Wywołuj je po narysowaniu wykresu. Typ zwrotu: numer
|
getXLocation(dataValue, optional_axis_index) |
Zwraca współrzędną x piksela Przykład: Wywołuj je po narysowaniu wykresu. Typ zwrotu: numer
|
getYLocation(dataValue, optional_axis_index) |
Zwraca współrzędną Y piksela Przykład: Wywołuj je po narysowaniu wykresu. Typ zwrotu: numer
|
removeAction(actionID) |
Usuwa z wykresu etykietkę z żądaniem Typ zwrotu:
none |
setAction(action) |
Ustawia działanie etykietki do wykonania, gdy użytkownik kliknie tekst działania.
Metoda
Przed wywołaniem metody Typ zwrotu:
none |
setSelection() |
Zaznacza określone elementy wykresu. Anuluje poprzedni wybór.
Elementy, które można wybrać, to paski, legendy i kategorie.
Na tym wykresie możesz wybrać tylko jeden element naraz.
Typ zwrotu: brak
|
clearChart() |
Czyści wykres i usuwa wszystkie przydzielone zasoby. Typ zwrotu: brak
|
Zdarzenia
Więcej informacji o korzystaniu z tych zdarzeń znajdziesz w artykułach Podstawowe funkcje interaktywne, 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. Można jej użyć do określenia, kiedy kliknięty jest tytuł, elementy danych, wpisy legendy, osie, linie siatki lub etykiety. Właściwości: targetID
|
error |
Uruchamiane, gdy podczas próby renderowania wykresu wystąpi błąd. Właściwości: id, message
|
legendpagination |
Uruchamiane, gdy użytkownik kliknie legendę podziału na strony. Przekazuje aktualny indeks stron oparty na zerowej legendzie i łączną liczbę stron. Właściwości: currentPageIndex, totalPages
|
onmouseover |
Uruchamiane, gdy użytkownik najedzie kursorem na jednostkę wizualną. Zwraca indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Pasek odpowiada komórce w tabeli danych, wpis legendy w kolumnie (indeks wiersza jest pusty) oraz kategoria w wierszu (indeks kolumny ma wartość null). Właściwości: wiersz, kolumna.
|
onmouseout |
Uruchamiane, gdy użytkownik odsunie kursor od jednostki wizualnej. Zwraca indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Pasek odpowiada komórce w tabeli danych, wpis legendy w kolumnie (indeks wiersza jest pusty) oraz kategoria w wierszu (indeks kolumny ma wartość null). Właściwości: wiersz, kolumna.
|
ready |
Wykres jest gotowy do wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywoływania po narysowaniu, musisz skonfigurować odbiornik 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 do żadnego serwera.