Omówienie
Panele to prosty sposób na organizowanie wielu wykresów i zarządzanie nimi za pomocą tych samych podstawowych danych. Korzystając z interfejsów API opisanych na tej stronie, możesz zwolnić się z pracy i koordynować wszystkie wykresy prowadzone w panelu.
Panele definiuje się za pomocą klas google.visualization.Dashboard
.
Instancje Dashboard
otrzymują DataTable
z danymi, które umożliwiają wizualizację i dystrybucję danych na wszystkich wykresach w panelu.
Elementy sterujące to widżety interfejsu użytkownika (np. selektory kategorii, suwaki zakresu, autouzupełnianie itp.), z którymi korzystasz, aby zwiększać ilość danych zarządzanych przez panel i wykresy, które są jego częścią.
Ustawienia są zdefiniowane za pomocą klas google.visualization.ControlWrapper
.
Możesz dodać do panelu ControlWrapper
instancji, które działają jak rury i zawory, w systemie hydraulicznym. Zbierają dane użytkowników i na podstawie tych informacji decydują, które dane z panelu powinny być udostępniane wykresom, które są ich częścią.
Przyjrzyjmy się temu przykładowi, w którym do wybierania danych na wykresie kołowym służy selektor kategorii i suwak.
Uwaga: panel jest interaktywny. Spróbuj sterować ustawieniami i obserwować zmiany na wykresie w czasie rzeczywistym.
Korzystanie z elementów sterujących i paneli
Oto najważniejsze kroki tworzenia panelu i umieszczania go na stronie. Poniżej znajdziesz fragment kodu, który ilustruje wszystkie powyższe kroki. Zawiera szczegółowe informacje o każdym kroku.
- Utwórz szkielet HTML dla swojego panelu. Strona może zawierać tyle elementów HTML, ile jest potrzebnych, by panel był wspierany przez każdego użytkownika. Dotyczy to panelu informacyjnego oraz wszystkich elementów sterujących i wykresów, które są jego częścią. Zwykle używa się w nim tagu <div>,
-
Wczytaj biblioteki. Panel musi zawierać lub wczytać tylko 2 biblioteki: interfejs Google API API i pakiet Google wizualizacji
controls
. - Przygotuj dane. Musisz przygotować dane do wizualizacji, co oznacza, że musisz samodzielnie określić dane w kodzie lub wysłać zapytanie o dane do witryny zdalnej.
- Utwórz instancję panelu. Utwórz instancję panelu, wywołując jego konstruktor i przekazując odwołanie do elementu <div>, w którym zostanie zapisany.
-
Utwórz dowolną liczbę instancji sterujących i wykresów
Utwórz instancje
google.visualization.ChartWrapper
igoogle.visualization.ControlWrapper
, aby opisać każdy wykres i określić, którym panelem zarządza. -
Ustal zależności. Wywołaj
bind()
w swoim panelu i przekaż instancje kontrolne i wykresy, aby dać znać panelowi, czym należy zarządzać. Gdy pogrupujesz element sterujący i wykres, panel zaktualizuje wykres, aby dopasować go do ograniczeń dotyczących danych wybranych przez element sterujący. -
Narysuj panel. Wywołaj
draw()
w swoim panelu i przekaż swoje dane, aby wyświetlić cały panel na stronie. - Zmiany automatyczne po narysowaniu. Opcjonalnie po pierwszym losowaniu możesz automatycznie zamontować elementy sterujące, które są częścią panelu, i na tej podstawie zaktualizować wykresy.
Oto prosty przykład strony, która tworzy prosty panel z przesunięciem zakresu na wykresie kołowym. Utworzony panel pojawi się pod fragmentem kodu.
<html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load the Visualization API and the controls package. google.charts.load('current', {'packages':['corechart', 'controls']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawDashboard); // Callback that creates and populates a data table, // instantiates a dashboard, a range slider and a pie chart, // passes in the data and draws it. function drawDashboard() { // Create our data table. var data = google.visualization.arrayToDataTable([ ['Name', 'Donuts eaten'], ['Michael' , 5], ['Elisa', 7], ['Robert', 3], ['John', 2], ['Jessica', 6], ['Aaron', 1], ['Margareth', 8] ]); // Create a dashboard. var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard_div')); // Create a range slider, passing some options var donutRangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'filter_div', 'options': { 'filterColumnLabel': 'Donuts eaten' } }); // Create a pie chart, passing some options var pieChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'chart_div', 'options': { 'width': 300, 'height': 300, 'pieSliceText': 'value', 'legend': 'right' } }); // Establish dependencies, declaring that 'filter' drives 'pieChart', // so that the pie chart will only display entries that are let through // given the chosen slider range. dashboard.bind(donutRangeSlider, pieChart); // Draw the dashboard. dashboard.draw(data); } </script> </head> <body> <!--Div that will hold the dashboard--> <div id="dashboard_div"> <!--Divs that will hold each control and chart--> <div id="filter_div"></div> <div id="chart_div"></div> </div> </body> </html>
Oto panel tworzony przez ten kod.
1. Utwórz szkielet HTML dla swojego pulpitu
Strona musi mieć tyle elementów HTML (zwykle <div>), by można było przechowywać zarówno panel, jak i wszystkie elementy sterujące i wykresy. Podczas tworzenia instancji pulpitu nawigacyjnego, sterowania i wykresu musisz przekazać odwołanie do jego elementu, więc przypisz identyfikator do każdego elementu HTML.
<!--Div that will hold the dashboard--> <div id="dashboard_div"> <!--Divs that will hold each control and chart--> <div id="filter_div"></div> <div id="chart_div"></div> </div>
Możesz umieścić każdy element HTML niezależnie od tego, jak chcesz wyglądać w panelu.
2. Wczytaj swoje biblioteki
Panel musi zawierać lub wczytać tylko 2 biblioteki: interfejs Google AJAX API i pakiet Google wizualizacji controls
. Interfejs API (w szczególności google.visualization.ChartWrapper
) automatycznie identyfikuje inne wymagane pakiety (na przykład gauge
, jeśli używasz wykresu wskaźnikowego) i wczytuje je na bieżąco bez dodatkowych działań z Twojej strony.
Aby pobrać bibliotekę sterowania, musisz użyć polecenia google.charts.load()
.
<!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load the Visualization API and the controls package. // Packages for all the other charts you need will be loaded // automatically by the system. google.charts.load('current', {'packages':['corechart', 'controls']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawDashboard); function drawDashboard() { // Everything is loaded. Assemble your dashboard... } </script>
3. Przygotowywanie danych
Po załadowaniu interfejsu API wizualizacji google.charts.setOnLoadCallback()
wywoła funkcję obsługi, dzięki czemu wiesz, że wszystkie wymagane metody i klasy pomocnicze są gotowe do przygotowania.
Panele akceptują dane w tabeli danych, tak samo jak wykresy.
4. Tworzenie instancji panelu
Po utworzeniu danych możesz utworzyć instancję obiektu panelu. Konstruktor pulpitu pobiera jeden parametr: odwołanie do elementu DOM, w którym można narysować panel.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
Panele są wyświetlane jako klasa JavaScript. Po utworzeniu pulpitu nawigacyjnego możesz wykonać kilka opcjonalnych czynności, takich jak dodanie detektorów zdarzeń (na przykład powiadomienie o dodaniu go do stanu „gotowy”). Panele obsługują zdarzenia w taki sam sposób jak wykresy. Więcej informacji znajdziesz w sekcjach Obsługa zdarzeń wizualizacji i Wyświetlanie błędów w sekcji wykresu.
5. Tworzenie instancji kontrolnych i wykresów
Zdefiniuj, ile instancji jest potrzebnych w przypadku każdego elementu sterującego i wykresu, który będzie częścią panelu.
Użyj
google.visualization.ChartWrapper
i
google.visualization.ControlWrapper
, aby odpowiednio określić wykresy i elementy sterujące.
// Create a range slider, passing some options var donutRangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'filter_div', 'options': { 'filterColumnLabel': 'Donuts eaten' } }); // Create a pie chart, passing some options var pieChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'chart_div', 'options': { 'width': 300, 'height': 300, 'pieSliceText': 'label' } });
Podczas tworzenia instancji ChartWrapper
i ControlWrapper
nie określaj parametru dataTable
ani dataSourceUrl
. Panel dostarcza do każdego pliku odpowiednie dane. Pamiętaj jednak o określeniu wymaganych parametrów: chartType
i containerId
w przypadku wykresów, oraz controlType
i containerId
w przypadku elementów sterujących.
Kilka wskazówek dotyczących konfigurowania elementów sterujących i wykresów:
-
Musisz przypisać wszystkim elementom sterującym
filterColumnIndex
(lubfilterColumnLabel
) określenie, na której kolumnie znajduje sięgoogle.visualization.DataTable
element sterujący (w powyższym przykładzie kontrolka działa w kolumnie spożyte pączki), -
Aby zainicjować je za pomocą stanu jednoznacznie wybranego po ich pobraniu, użyj opcji konfiguracji
state
. Za pomocą tego ustawienia możesz na przykład poprawić początkowe położenie kciuka suwaka zakresu.var donutRangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'filter_div', 'options': { 'filterColumnLabel': 'Donuts eaten', 'minValue': 1, 'maxValue': 10 }, // Explicitly positions the thumbs at position 3 and 8, // out of the possible range of 1 to 10. 'state': {'lowValue': 3, 'highValue': 8} });
-
Wszystkie wykresy znajdujące się w panelu mają tę samą bazową tabelę danych, która została utworzona w kroku Przygotowywanie danych. Jednak wykresy mają często określony układ kolumn, np. wykres kołowy, po którym znajduje się kolumna z wartością w postaci kolumny z wartościami.
Podczas konfigurowania każdej instancji
ChartWrapper
użyj opcjiview
, aby zadeklarować, które kolumny są odpowiednie dla wykresu, jak pokazano w przykładzie poniżej.var data = google.visualization.arrayToDataTable([ ['Name', 'Gender', 'Age', 'Donuts eaten'], ['Michael' , 'Male', 12, 5], ['Elisa', 'Female', 20, 7], ['Robert', 'Male', 7, 3], ['John', 'Male', 54, 2], ['Jessica', 'Female', 22, 6], ['Aaron', 'Male', 3, 1], ['Margareth', 'Female', 42, 8] ]); var pieChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'chart_div', 'options': { 'width': 300, 'height': 300, 'title': 'Donuts eaten per person' }, // The pie chart will use the columns 'Name' and 'Donuts eaten' // out of all the available ones. 'view': {'columns': [0, 3]} }); // The rest of dashboard configuration follows // ...
6. Określanie zależności
Gdy utworzysz wystąpienie panelu oraz wszystkich zawartych w nim elementów sterujących i wykresów, użyj metody bind()
, aby poinformować panel o zależnościach między elementami sterującymi i wykresami.
Gdy pogrupujesz element sterujący i wykres, panel zaktualizuje wykres zgodnie z ograniczeniami wymuszanymi przez to dane przez kontrolę. W przykładowym panelu, który kompilujesz, suwak zakresu i wykres kołowy są ze sobą powiązane, więc gdy wchodzisz w interakcję z pierwszym, ta druga wartość wyświetla tylko dane, które pasują do wybranego zakresu.
// 'pieChart' will update whenever you interact with 'donutRangeSlider' // to match the selected range. dashboard.bind(donutRangeSlider, pieChart);
Powiązania i wykresy możesz łączyć w wielu różnych konfiguracjach: jeden do jednego, jeden do wielu, wiele do jednego i wiele do wielu. Za każdym razem, gdy do wykresu jest przypisanych wiele elementów sterujących, panel aktualizuje wykres, aby dopasować go do połączonych ograniczeń wyegzekwowanych przez wszystkie powiązane ustawienia. Jednocześnie element sterujący może generować wiele wykresów. Aby jednocześnie określić wiele powiązań, przekaż tablice do metody bind()
, a nie do pojedynczych instancji. Możesz też połączyć kilka wywołań bind()
. Oto kilka przykładów.
// Many-to-one binding where 'ageSelector' and 'salarySelector' concurrently // participate in selecting which data 'ageVsSalaryScatterPlot' visualizes. dashboard.bind([agePicker, salaryPicker], ageVsSalaryScatterPlot); // One-to-many binding where 'ageSelector' drives two charts. dashboard.bind(agePicker, [ageVsSalaryScatterPlot, ageBarChart]); // bind() chaining where each control drives its own chart. dashboard.bind(agePicker, ageBarChart).bind(salaryRangePicker, salaryPieChart);
W przypadku zaawansowanych zastosowań możesz też powiązać elementy sterujące z innymi ustawieniami, aby utworzyć łańcuchy zależności .
dashboard.bind(countryPicker, regionPicker).bind(regionPicker, cityPicker);
7. Rysowanie panelu
Wywołaj metodę draw()
w instancji panelu, aby wyświetlić cały panel.
Metoda draw()
przyjmuje tylko 1 parametr: DataTable
(lub DataView
), który wykorzystuje panel.
Funkcja draw()
powinna być wywoływana za każdym razem, gdy zmienisz kompozycję panelu (np. przez dodanie do niego nowych elementów sterujących lub wykresów) albo w ogólny sposób DataTable
, które go obsługuje.
Instancja panelu uruchamia zdarzenie ready
za każdym razem, gdy draw()
zakończy rysowanie wszystkich elementów sterujących i wykresów, które są jego częścią. Zdarzenie error
jest uruchamiane, gdy nie można wyświetlić któregoś z elementów sterujących lub wykresu. Więcej informacji o obsłudze zdarzeń znajdziesz w sekcji Obsługa zdarzeń.
Uwaga: zanim spróbujesz zmienić kompozycję panelu lub narysować ją ponownie, musisz nasłuchiwać zdarzenia ready
.
8. Zautomatyzowane zmiany po losowaniu
Po zakończeniu działania panelu draw()
będzie on wyświetlany na żywo i będzie automatycznie odpowiadać na każde jego działanie (np. zmiana wybranego zakresu suwaka kontrolnego, który jest częścią panelu).
Jeśli musisz automatycznie zmienić stan panelu, możesz to zrobić bezpośrednio na instancjach ControlWrapper
i ChartWrapper
, które są jego częścią.
Zalecamy, aby wszystkie niezbędne zmiany były wprowadzane bezpośrednio w konkretnej instancji ControlWrapper
(lub ChartWrapper
). Przykładem może być zmiana opcji kontrolnej lub stanu za pomocą odpowiednio reguł setOption()
i setState()
, a następnie wywołanie metody draw()
. Panel zostanie zaktualizowany zgodnie z żądanymi zmianami.
Przykład poniżej pokazuje, jak to wygląda.
<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', 'controls']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var dashboard = new google.visualization.Dashboard( document.getElementById('programmatic_dashboard_div')); // We omit "var" so that programmaticSlider is visible to changeRange. var programmaticSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'programmatic_control_div', 'options': { 'filterColumnLabel': 'Donuts eaten', 'ui': {'labelStacking': 'vertical'} } }); var programmaticChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'programmatic_chart_div', 'options': { 'width': 300, 'height': 300, 'legend': 'none', 'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0}, 'pieSliceText': 'value' } }); var data = google.visualization.arrayToDataTable([ ['Name', 'Donuts eaten'], ['Michael' , 5], ['Elisa', 7], ['Robert', 3], ['John', 2], ['Jessica', 6], ['Aaron', 1], ['Margareth', 8] ]); dashboard.bind(programmaticSlider, programmaticChart); dashboard.draw(data); changeRange = function() { programmaticSlider.setState({'lowValue': 2, 'highValue': 5}); programmaticSlider.draw(); }; changeOptions = function() { programmaticChart.setOption('is3D', true); programmaticChart.draw(); }; } </script> </head> <body> <div id="programmatic_dashboard_div" style="border: 1px solid #ccc"> <table class="columns"> <tr> <td> <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div> <div> <button style="margin: 1em 1em 1em 2em" onclick="changeRange();"> Select range [2, 5] </button><br /> <button style="margin: 1em 1em 1em 2em" onclick="changeOptions();"> Make the pie chart 3D </button> </div> </td> <td> <div id="programmatic_chart_div"></div> </td> </tr> </table> </div> </body> </html>
Dokumentacja API
Ta sekcja zawiera obiekty wyświetlone w interfejsie Control and Dashboards API, a także standardowe metody korzystające ze wszystkich elementów sterujących.
Panel
Reprezentuje zbiór współpracy elementów sterujących i wykresów wykorzystujących te same podstawowe dane.
Zespół
Dashboard(containerRef)
- containerref
- Odwołanie do prawidłowego elementu kontenera na stronie, w którym znajdzie się zawartość panelu.
Metody
W panelu podawane są następujące metody:
Metoda | Typ zwracanej wartości | Opis |
---|---|---|
bind(controls, charts) |
google.visualization.Panel. |
Łączy co najmniej 1 element sterujący z co najmniej 1 innym uczestnikiem panelu (wykresem lub innymi elementami sterującymi), aby gdy pierwszy z tych elementów zbierał automatyzację lub interakcję użytkownika wpływającą na dane zarządzane przez panel. Zwraca samą instancję panelu w celu powiązania wielu wywołań
|
draw(dataTable) |
Brak | Rysuje panel.
|
getSelection() |
Tablica obiektów |
Zwraca tablicę wybranych elementów wizualnych wykresów na pulpicie nawigacyjnym. Gdy metoda Uwaga: do każdego wykresu, którego chcesz posłuchać, nadal musisz dołączyć detektory zdarzeń. |
Zdarzenia
Obiekt Dashboard wysyła poniższe zdarzenia. Pamiętaj, że aby wywołać zdarzenie, musisz wywołać metodę Dashboard.draw()
.
Nazwa | Opis | Usługi |
---|---|---|
error |
Uruchamiane, gdy podczas próby renderowania panelu wystąpi błąd. Renderowanie co najmniej 1 elementu sterującego i wykresów znajdujących się w panelu nie powiodło się. | id, message, |
ready |
Panel zakończył rysowanie i można je zaakceptować. Wszystkie elementy sterujące i wykresy, które są częścią panelu, są gotowe do stosowania metody rozmowy zewnętrznej i interakcji użytkownika. Jeśli chcesz zmienić panel (lub wyświetlane w nim dane) po jego narysowaniu, ustaw odbiornik dla tego zdarzenia przed wywołaniem metody Zdarzenie
|
Brak |
Opakowanie pakietów
Obiekt ControlWrapper otaczają kod JSON skonfigurowanej instancji kontrolnej. Klasa ujawnia metody wygodnego definiowania opcji panelu, rysowania i automatycznego zmieniania ich stanu.
Zespół
ControlWrapper(opt_spec)
- opt_spec
- [Opcjonalny] – obiekt JSON definiujący element sterujący lub zserializowany ciąg znaków danego obiektu. Obsługiwane właściwości obiektu JSON są opisane w tabeli poniżej. Jeśli nie określisz stanu, musisz ustawić wszystkie odpowiednie właściwości za pomocą metod set... wykrytych przez ControlWrapper.
Właściwość | Typ | Wymagany | Domyślna | Opis |
---|---|---|---|---|
typ kontroli | Ciąg znaków | Wymagany | brak |
Nazwa klasy elementu sterującego. W przypadku ustawień Google można pominąć nazwę pakietu google.visualization . Przykłady: CategoryFilter , NumberRangeFilter .
|
identyfikator kontenera | Ciąg znaków | Wymagany | brak | Identyfikator elementu DOM na stronie, na którym zostanie umieszczony element sterujący. |
Opcje | obiekt | Opcjonalna | brak |
Obiekt opisujący opcje elementu sterującego. Możesz użyć notacji literału JavaScript lub podać obiekt do obiektu. Przykład:
"options": {"filterColumnLabel": "Age",
"minValue": 10, "maxValue": 80}
|
state | obiekt | Opcjonalna | brak |
Obiekt opisujący stan elementu sterującego. Stan zbiera wszystkie zmienne, na które może wpływać użytkownik korzystający z elementu sterującego. Stan suwaka zakresu można na przykład opisać jako pozycję zajmowaną przez niski i wysoki suwak. Możesz użyć notacji literalnej JavaScript lub podać obiekt – przykład: "state": {"lowValue": 20, "highValue": 50}
|
Metody
ControlWrapper udostępnia te dodatkowe metody:
Metoda | Typ zwracanej wartości | Opis |
---|---|---|
draw() |
Brak |
Rysuje element sterujący. Normalnie panel, w którym znajduje się element sterujący, rysuje.
Po zmianie dowolnego innego ustawienia, takiego jak opcje czy stan, należy wywołać metodę |
toJSON() |
Ciąg znaków | Zwraca ciąg znaków w formacie JSON reprezentujący element sterujący. |
clone() |
ControlWrapper | Zwraca głęboką kopię kodu sterującego. |
getControlType() |
Ciąg znaków |
Nazwa klasy elementu sterującego. Jeśli jest to ustawienie Google, nazwa nie zostanie zakwalifikowana za pomocą google.visualization . Na przykład w przypadku ustawienia „CategoryFiltr” zwracałaby wartość „CategoryFilter”, a nie „google.visualization.CategoryFilter”.
|
getControlName() |
Ciąg znaków | Zwraca nazwę elementu sterującego przypisaną przez użytkownika setControlName() . |
getControl() |
Odniesienie do obiektu sterującego |
Zwraca odwołanie do elementu sterującego utworzonego przez to element ControlWrapper. Zwrócone wartości będą puste, dopóki nie wywołasz obiektu draw() na obiekcie ControlWrapper (lub w panelu, na którym jest on) i wywoła gotowe zdarzenie. Zwracany obiekt ujawnia tylko jedną metodę: resetControl() , która resetuje stan elementu sterującego do stanu, w którym został zainicjowany (np. resetuje element formularza HTML).
|
getContainerId() |
Ciąg znaków | Identyfikator elementu kontenera DOM elementu sterującego. |
getOption(key, opt_default_val) |
Dowolny typ | Zwraca podaną wartość opcji sterowania
|
getOptions() |
obiekt | Zwraca obiekt opcji dla tego elementu sterującego. |
getState() |
obiekt | Zwraca stan elementu sterującego. |
setControlType(type) |
Brak |
Określa typ elementu sterującego. Przekaż nazwę klasy elementu sterującego, aby utworzyć instancję. Jeśli jest to element sterujący Google, nie zakwalifikuj go za pomocą google.visualization .
Aby na przykład ustawić suwak zakresu liczbowego na kolumnie liczbowej, przekaż wartość „NumberRangeFilter”.
|
setControlName(name) |
Brak | Ustawia dowolną nazwę elementu sterującego. Nie jest to nigdzie widoczne w kontrolce, ale służy tylko jako odniesienie. |
setContainerId(id) |
Brak | Ustawia identyfikator elementu DOM elementu sterującego. |
setOption(key, value) |
Brak |
Ustawia pojedynczą wartość opcji, gdzie klucz to nazwa opcji, a wartość jest wartością. Aby usunąć wybór opcji, przekaż wartość null. Pamiętaj, że klucz może być odpowiednią nazwą, na przykład 'vAxis.title' .
|
setOptions(options_obj) |
Brak | Ustawia kompletny obiekt opcji dla elementu sterującego. |
setState(state_obj) |
Brak | Ustawia stan elementu sterującego. Stan zbiera wszystkie zmienne, na które może wpływać użytkownik korzystający z elementu sterującego. Stan suwaka zakresu można na przykład opisać jako pozycję zajmowaną przez niski i wysoki suwak. |
Zdarzenia
Obiekt ControlWrapper zgłasza poniższe zdarzenia. Pamiętaj, że przed wywołaniem jakichkolwiek zdarzeń musisz wywołać metodę ControlWrapper.draw()
(lub narysować panel sterujący).
Nazwa | Opis | Usługi |
---|---|---|
error |
Uruchamiane, gdy podczas renderowania elementu sterującego wystąpi błąd. | id, message, |
ready |
Element sterujący jest gotowy do przyjmowania interakcji użytkowników i do wywołań metod zewnętrznych. Jeśli chcesz korzystać z elementu sterującego i metod wywołania, po narysowaniu ich należy skonfigurować odbiornik tego zdarzenia przed wywołaniem metody draw i wywołanie jej dopiero po wywołaniu zdarzenia. Możesz też nasłuchiwać zdarzenia ready w panelu, które zawiera metody kontroli i wywołania połączenia dopiero po uruchomieniu zdarzenia.
|
Brak |
statechange |
Uruchamiane, gdy użytkownik wchodzi w interakcję z elementem sterującym, co wpływa na jego stan. Na przykład zdarzenie statechange będzie uruchamiane przy przesuwaniu kciukiem suwaka zakresu. Aby pobrać zaktualizowany stan elementu sterującego po wywołaniu zdarzenia, wywołaj ControlWrapper.getState() .
|
Brak |
ChartWrapper
Więcej informacji znajdziesz w dokumentacji dotyczącej google.visualization.ChartWrapper
w sekcji dokumentacji interfejsu API wizualizacji.
Jeśli używasz ChartWrapper
w panelu, obowiązują poniższe uwagi:
-
Nie ustawiaj jednoznacznie atrybutów
dataTable
,query
,dataSourceUrl
irefreshInterval
. Panel, na którym znajduje się wykres, dostarcza do niego potrzebne dane. -
Ustaw jego atrybut
view
, aby zadeklarować, które kolumny spośród wszystkich kolumn dostępnych wdataTable
, które są przypisane do panelu, są odpowiednie dla wykresu, tak jak to opisano w sekcji Tworzenie elementu sterującego i instancji wykresu.
Galeria elementów sterujących
Filtry to elementy graficzne, dzięki którym użytkownicy mogą interaktywnie wybierać dane wyświetlane na wykresie. W tej sekcji opisano filtry wykresu Google: CategoryFilter, ChartRangeFilter, DateRangeFilter, NumberRangeFilter i StringFilter.
Możesz użyć dowolnego z nich jako parametru w polu ControlWrapper.setControlType()
.
Uwaga: w opisach opcji do opisywania atrybutów zagnieżdżonych używany jest zapis z kropką. Na przykład opcja o nazwie 'ui.label'
powinna być zadeklarowana w obiekcie opcji jako var options = {"ui": {"label": "someLabelValue"} };
Filtr kategorii
Selektor do wyboru co najmniej 1 z określonych wartości.
Stan
Nazwa | Typ | Domyślna | Opis |
---|---|---|---|
selectedValues, | Tablica obiektów lub typów podstawowych | brak |
Zestaw obecnie wybranych wartości. Wybrane wartości muszą być zestawem ogólnych wartości, które można wybrać za pomocą opcji values (wszystkie zbędne wartości są ignorowane). Jeśli CategoryFilter nie umożliwia wielokrotnego wyboru, zachowana jest tylko pierwsza wartość tablicy.
|
Opcje
Nazwa | Typ | Domyślna | Opis |
---|---|---|---|
Indeks kolumn filtra | liczba | brak |
Kolumna tabeli danych, na której ma działać filtr. Musisz podać tę opcję lub filterColumnLabel . Jeśli obie te opcje są obecne, ta opcja ma pierwszeństwo.
|
Etykietakolumny filtra | tekst | brak |
Etykieta kolumny, na której powinien działać filtr. Musisz podać tę opcję lub filterColumnIndex . Jeśli występuje oba, plik filterColumnIndex ma pierwszeństwo.
|
wartości | Tablica | auto |
Lista wartości do wyboru. Jeśli używana jest tablica obiektów, powinny one mieć odpowiednią reprezentację toString() do wyświetlenia użytkownikowi. Jeśli wartość jest pusta lub nieokreślona, lista wartości zostanie automatycznie obliczona na podstawie wartości znajdujących się w kolumnie Tabela danych, na której działa ten element sterujący.
|
useFormattedValue | wartość logiczna | fałsz | Podczas wypełniania listy możliwych do wyboru wartości z kolumny tabeli danych działa ten filtr, niezależnie od tego, czy chcesz użyć rzeczywistych wartości komórki czy ich formatowania. |
UI | obiekt | brak |
Obiekt z członkami, który służy do konfigurowania różnych aspektów interfejsu sterowania.
Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak tutaj: {label: 'Metric', labelSeparator: ':'} |
ui.caption | tekst | „Wybierz wartość...” | Napisy wyświetlane w widżecie selektora wartości, gdy nie jest wybrany żaden element. |
ui.sortValues | wartość logiczna | prawda | Określa, czy wartości do wyboru powinny być sortowane. |
ui.selectedValuesLayout | tekst | „poza” | Jak wyświetlać wybrane wartości, gdy można wybrać wiele wartości. Możliwe wartości:
|
ui.allowNone | wartość logiczna | prawda |
Określa, czy użytkownik może nie wybierać żadnej wartości. W przypadku wartości false użytkownik musi wybrać co najmniej 1 z dostępnych wartości. Jeśli podczas inicjowania kontroli opcja jest ustawiona na false i nie podano stanu selectedValues , automatycznie wybierana jest pierwsza wartość z dostępnych.
|
ui.allowmultiple | wartość logiczna | prawda | Określa, czy można wybrać więcej niż jedną wartość. |
ui.allowTypeing | wartość logiczna | prawda | Określa, czy użytkownik może pisać w polu tekstowym, aby zawęzić listę możliwych opcji (za pomocą autouzupełniania). |
ui.label, | tekst | auto | Etykieta wyświetlana obok selektora kategorii. Jeśli jej nie określisz, zostanie użyta etykieta kolumny, na której działa ten element sterujący. |
ui.labelSeparator, | tekst | brak | Ciąg znaków separatora dołączonego do etykiety, który oddziela etykietę od selektora kategorii. |
UI.labelStacking, | tekst | „poziome” |
Określa, czy etykieta powinna być wyświetlana powyżej (skumulowane w pionie), czy obok (skumulowane w poziomie) selektora kategorii. Użyj 'vertical' lub 'horizontal' .
|
ui.cssKlasa | tekst | „google-visualization-controls-categoryfilter” | Klasa CSS przypisana do elementu sterującego na potrzeby stylu niestandardowego. |
FiltrZakresówwykresów
Suwak z dwoma palcami nałożonymi na wykres pozwala wybrać zakres wartości z osi ciągłej wykresu.
Stan
Nazwa | Typ | Domyślna | Opis |
---|---|---|---|
zakres.start | liczba, data, data lub godzina | Wartość początkowa zakresu | Początek wybranego zakresu (włącznie). |
zakres.końcowy | liczba, data, data lub godzina | Wartość końcowa zakresu | Koniec wybranego zakresu (włącznie). |
Opcje
Nazwa | Typ | Domyślna | Opis |
---|---|---|---|
Indeks kolumn filtra | liczba | brak |
Indeks kolumny w tabeli danych, na której działa filtr.
Musisz podać tę opcję lub filterColumnLabel . Jeśli występują oba, ta opcja ma pierwszeństwo.
Pamiętaj, że określenie indeksu dotyczy tylko kolumny domeny umieszczonej na osi ciągłej wykresu wyświetlanego w panelu sterowania. |
Etykietakolumny filtra | tekst | brak |
Etykieta kolumny tabeli danych, na której działa filtr. Musisz podać tę opcję lub filterColumnIndex . Jeśli istnieją oba, pierwszeństwo ma filterColumnIndex .
Pamiętaj, że określenie etykiety kolumny domena ma sens tylko w ciągłej osi wykresu przedstawionego w kontrolce. |
UI | obiekt | brak |
Obiekt z członkami, który służy do konfigurowania różnych aspektów interfejsu sterowania.
Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak tutaj: {chartType: 'ScatterChart', chartOptions: {pointSize: 10}} |
ui.graphType | tekst | Wykres mieszany |
Typ wykresu narysowanego w ramach elementu sterującego. Może to być jeden z tych wykresów: „Wykres warstwowy”, „Wykres liniowy”, „Wykres mieszany” lub „Wykres punktowy”. |
ui.graphOptions | obiekt |
{ 'enableInteractivity': false, 'chartArea': {'height': '100%'}, 'legend': {'position': 'none'}, 'hAxis': {'textPosition': 'in'}, 'vAxis': { 'textPosition': 'none', 'gridlines': {'color': 'none'} } } |
Opcje konfiguracji wykresu narysowanego w ramach elementu sterującego.
Zezwala na taki sam poziom konfiguracji jak dowolny wykres w panelu i jest zgodny z formatem akceptowanym przez funkcję ChartWrapper.setOptions().
Możesz określić dodatkowe opcje lub zastąpić ustawienia domyślne (pamiętaj jednak, że ustawienia domyślne zostały starannie wybrane pod kątem optymalnego wyglądu). |
ui.schemaView | Obiekt lub ciąg (obiekt szeregowy) | brak |
Specyfikacja widoku danych, który ma być zastosowany do tabeli danych służącej do rysowania wykresu w formie kontrolnej. Zezwala na taki sam poziom konfiguracji jak dowolny wykres w panelu i jest zgodny z formatem akceptowanym przez funkcję ChartWrapper.setView(). Jeśli nie zostanie podany, do tworzenia wykresu używana jest tabela danych.
Pamiętaj, że oś pozioma rysowanego wykresu musi być ciągła, więc musisz prawidłowo wybrać |
ui.minRangeSize | liczba | Różnica w wartości danych interpretowana jako 1 piksel |
Minimalny rozmiar zakresu, który można wybrać (range.end - range.start ), określony w jednostkach wartości danych. W przypadku osi numerycznej jest to liczba (nie musi być liczbą całkowitą).
W przypadku daty, daty i godziny lub osi czasu jest to liczba całkowita, która określa różnicę w milisekundach.
|
ui.snapToData | wartość logiczna | fałsz |
Jeśli ustawisz wartość prawda, kciuki zakresu będą przyciągane do najbliższych punktów danych.
W tym przypadku punkty końcowe zakresu zwróconego przez getState() muszą być wartościami w tabeli danych.
|
Zdarzenia
Dodatki do zdarzeń ControlWrapper:
Nazwa | Opis | Usługi |
---|---|---|
statechange |
Podobnie jak w przypadku każdego elementu ControlWrapper, ma tylko dodatkową właściwość logiczną inProgress , która określa, czy stan jest obecnie zmieniany (przeciągany jest jeden z kciuków lub sam zakres).
|
w toku |
Filtr zakresu dat
Podwójny suwak umożliwiający wybór zakresów dat.
Spróbuj przesunąć suwak, aby zmienić wiersze widoczne w tabeli poniżej.
Stan
Nazwa | Typ | Domyślna | Opis |
---|---|---|---|
LowValue | liczba | brak | Dolny zakres wybranego zakresu. |
wysokaWartość | liczba | brak | Wyższy zakres w wybranym zakresie. |
LowThumbAtMinimum | wartość logiczna | brak |
Określa, czy dolny kciuk suwaka jest zablokowany przy minimalnym dozwolonym zakresie. Jeśli jest skonfigurowana, zastępuje lowValue .
|
highThumbAtMaksymaln | wartość logiczna | brak |
Określa, czy górny suwak jest zablokowany w maksymalnym dozwolonym zakresie. Jeśli jest skonfigurowana, zastępuje highValue .
|
Opcje
Nazwa | Typ | Domyślna | Opis |
---|---|---|---|
Indeks kolumn filtra | liczba | brak |
Kolumna tabeli danych, na której ma działać filtr. Musisz podać tę opcję lub filterColumnLabel . Jeśli obie te opcje są obecne, ta opcja ma pierwszeństwo.
Musi wskazywać kolumnę typu number .
|
Etykietakolumny filtra | tekst | brak |
Etykieta kolumny, na której powinien działać filtr. Musisz podać tę opcję lub filterColumnIndex . Jeśli występuje oba, plik filterColumnIndex ma pierwszeństwo. Musi wskazywać kolumnę typu number .
|
minValue | Data | auto | Minimalna dozwolona wartość dla niższego zakresu. Jeśli wartość jest nieokreślona, zostanie ona wywnioskowana z zawartości tabeli danych zarządzanej przez element sterujący. |
Wartość maksymalna | Data | auto | Maksymalna dozwolona wartość dla zakresu w wyższym zakresie. Jeśli wartość jest nieokreślona, zostanie ona wywnioskowana z zawartości tabeli danych zarządzanej przez element sterujący. |
UI | obiekt | brak |
Obiekt z członkami, który służy do konfigurowania różnych aspektów interfejsu sterowania.
Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak tutaj: {label: 'Age', labelSeparator: ':'} |
ui.format, | obiekt | brak | Jak przedstawić datę w postaci ciągu znaków. Akceptuje każdy prawidłowy format daty. |
ui.step | tekst | dzień | Minimalna możliwa zmiana, która może wystąpić podczas przeciągania kciuka: może to być dowolna jednostka czasu obejmująca maksymalnie dzień. ("miesiąc" i "rok" nie są jeszcze obsługiwane). |
ui.ticks | liczba | auto | Liczba znaczników (stałych pozycji na pasku zakresu), które mogą być wyświetlane na suwakach. |
ui.unitIncrement | tekst | '1' | Kwota przyrostowa dla jednostek zwiększających się zakresy. Przeniesienie jednostki jest równoważne użyciu klawiszy strzałek do przesuwania kciuka. |
ui.blockIncrement | liczba | 10 | Kwota przyrostu dla bloków przyrostu zakresów. Zwiększenie bloku jest równoważne użyciu klawiszy pgUp i pgDown do przesuwania kciuków suwaka. |
ui.showRangeValues | wartość logiczna | prawda | Określa, czy etykiety obok suwaka mają wyświetlać się w wybranym zakresie. |
UI.orientation | tekst | „poziome” | Orientacja suwaka. Może to być 'horizontal' lub 'vertical' . |
ui.label, | tekst | auto | Etykieta wyświetlana obok suwaka. Jeśli jej nie określisz, zostanie użyta etykieta kolumny, której używa ten element sterujący. |
ui.labelSeparator, | tekst | brak | Ciąg znaków separatora dołączonego do etykiety, który wizualnie oddziela etykietę od suwaka. |
UI.labelStacking, | tekst | „poziome” |
Określa, czy etykieta powinna wyświetlać się powyżej (skumulowana pionowo) czy obok (skumulowane poziomo) na suwaku. Użyj 'vertical' lub 'horizontal' .
|
ui.cssKlasa | tekst | „google-visualization-controls-rangefilter” | Klasa CSS przypisana do elementu sterującego na potrzeby stylu niestandardowego. |
Filtr zakresów numerów
Podwójny suwak umożliwiający wybór zakresów wartości liczbowych.
Stan
Nazwa | Typ | Domyślna | Opis |
---|---|---|---|
LowValue | liczba | brak | Dolny zakres wybranego zakresu. |
wysokaWartość | liczba | brak | Wyższy zakres w wybranym zakresie. |
LowThumbAtMinimum | wartość logiczna | brak |
Określa, czy dolny kciuk suwaka jest zablokowany przy minimalnym dozwolonym zakresie. Jeśli jest skonfigurowana, zastępuje lowValue .
|
highThumbAtMaksymaln | wartość logiczna | brak |
Określa, czy górny suwak jest zablokowany w maksymalnym dozwolonym zakresie. Jeśli jest skonfigurowana, zastępuje highValue .
|
Opcje
Nazwa | Typ | Domyślna | Opis |
---|---|---|---|
Indeks kolumn filtra | liczba | brak |
Kolumna tabeli danych, na której ma działać filtr. Musisz podać tę opcję lub filterColumnLabel . Jeśli obie te opcje są obecne, ta opcja ma pierwszeństwo.
Musi wskazywać kolumnę typu number .
|
Etykietakolumny filtra | tekst | brak |
Etykieta kolumny, na której powinien działać filtr. Musisz podać tę opcję lub filterColumnIndex . Jeśli występuje oba, plik filterColumnIndex ma pierwszeństwo. Musi wskazywać kolumnę typu number .
|
minValue | liczba | auto | Minimalna dozwolona wartość dla niższego zakresu. Jeśli wartość jest nieokreślona, zostanie ona wywnioskowana z zawartości tabeli danych zarządzanej przez element sterujący. |
Wartość maksymalna | liczba | auto | Maksymalna dozwolona wartość dla zakresu w wyższym zakresie. Jeśli wartość jest nieokreślona, zostanie ona wywnioskowana z zawartości tabeli danych zarządzanej przez element sterujący. |
UI | obiekt | brak |
Obiekt z członkami, który służy do konfigurowania różnych aspektów interfejsu sterowania.
Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak tutaj: {label: 'Age', labelSeparator: ':'} |
ui.format, | obiekt | brak | Jak przedstawić liczbę w postaci ciągu znaków. Akceptuje każdy prawidłowy format liczb. |
ui.step | liczba | 1 lub obliczona na podstawie ticks , jeśli określono |
Minimalna możliwa zmiana przy przeciąganiu kciukiem. |
ui.ticks | liczba | auto | Liczba znaczników (stałych pozycji na pasku zakresu), które mogą być wyświetlane na suwakach. |
ui.unitIncrement | liczba | 1 | Kwota przyrostowa dla jednostek zwiększających się zakresy. Przeniesienie jednostki jest równoważne użyciu klawiszy strzałek do przesuwania kciuka. |
ui.blockIncrement | liczba | 10 | Kwota przyrostu dla bloków przyrostu zakresów. Zwiększenie bloku jest równoważne użyciu klawiszy pgUp i pgDown do przesuwania kciuków suwaka. |
ui.showRangeValues | wartość logiczna | prawda | Określa, czy etykiety obok suwaka mają wyświetlać się w wybranym zakresie. |
UI.orientation | tekst | „poziome” | Orientacja suwaka. Może to być 'horizontal' lub 'vertical' . |
ui.label, | tekst | auto | Etykieta wyświetlana obok suwaka. Jeśli jej nie określisz, zostanie użyta etykieta kolumny, której używa ten element sterujący. |
ui.labelSeparator, | tekst | brak | Ciąg znaków separatora dołączonego do etykiety, który wizualnie oddziela etykietę od suwaka. |
UI.labelStacking, | tekst | „poziome” |
Określa, czy etykieta powinna wyświetlać się powyżej (skumulowana pionowo) czy obok (skumulowane poziomo) na suwaku. Użyj 'vertical' lub 'horizontal' .
|
ui.cssKlasa | tekst | „google-visualization-controls-rangefilter” | Klasa CSS przypisana do elementu sterującego na potrzeby stylu niestandardowego. |
Filtruj ciągi
Proste pole do wprowadzania tekstu, które umożliwia filtrowanie danych za pomocą dopasowania ciągu tekstowego. Aktualizuje się po każdym naciśnięciu klawisza. Wpisz j
, aby zawęzić tabelę do Jana i Jessicy.
Stan
Nazwa | Typ | Domyślna | Opis |
---|---|---|---|
wartość | ciąg lub obiekt | brak | Tekst aktualnie wpisany w polu sterowania. |
Opcje
Nazwa | Typ | Domyślna | Opis |
---|---|---|---|
Indeks kolumn filtra | liczba | brak |
Kolumna tabeli danych, na której ma działać filtr. Musisz podać tę opcję lub filterColumnLabel . Jeśli obie te opcje są obecne, ta opcja ma pierwszeństwo.
|
Etykietakolumny filtra | tekst | brak |
Etykieta kolumny, na której powinien działać filtr. Musisz podać tę opcję lub filterColumnIndex . Jeśli występuje oba, plik filterColumnIndex ma pierwszeństwo.
|
typ dopasowania | tekst | „prefiks” |
Określa, czy element sterujący powinien łączyć się tylko z dokładnymi wartościami ('exact' ), od początku wartości ('prefix' ) czy dowolnego podłańcucha ('any' ).
|
Wielkość liter | wartość logiczna | fałsz | Określa, czy w dopasowaniu ma być uwzględniana wielkość liter. |
useFormattedValue | wartość logiczna | fałsz | Określa, czy element sterujący powinien być zgodny z wartościami w komórce czy prawdziwymi wartościami. |
UI | obiekt | brak |
Obiekt z członkami, który służy do konfigurowania różnych aspektów interfejsu sterowania.
Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak tutaj: {label: 'Name', labelSeparator: ':'} |
ui.realtimeTrigger | wartość logiczna | prawda | Określa, czy element sterujący powinien być zgodny z każdym naciśnięciem klawisza czy tylko wtedy, gdy zmieni się pole do wprowadzania danych (strata fokusu lub naciśnięcie klawisza Enter). |
ui.label, | tekst | auto | Etykieta wyświetlana obok pola do wprowadzania danych. Jeśli jej nie określisz, zostanie użyta etykieta kolumny, na której działa ten element sterujący. |
ui.labelSeparator, | tekst | brak | Ciąg znaków separatora dołączany do etykiety, który wizualnie oddziela etykietę od pola do wprowadzania danych. |
UI.labelStacking, | tekst | „poziome” |
Określa, czy etykieta powinna się wyświetlać nad stosem pionowym czy poziomym (skumulowane poziomo). Użyj 'vertical' lub 'horizontal' .
|
ui.cssKlasa | tekst | „google-visualization-controls-stringfilter” | Klasa CSS przypisana do elementu sterującego na potrzeby stylu niestandardowego. |