Omówienie
Dynamiczny wykres umożliwiający poznanie kilku wskaźników w ujęciu czasowym. Wykres jest renderowany w przeglądarce za pomocą Flasha.
Uwaga dla programistów: ze względu na ustawienia zabezpieczeń Flasha ten element (oraz wszystkie wizualizacje oparte na technologii Flash) może nie działać prawidłowo w przypadku otwarcia pliku z lokalizacji w przeglądarce (np. file:///c:/webhost/myhost/myviz.html), a nie z adresu URL serwera WWW (np. http://www.myhost.com/myviz.html). Jest to zwykle problem testowy. Możesz rozwiązać ten problem zgodnie z opisem na stronie firmy Adobe.
Przykład
Uwaga: ten kod nie zadziała, jeśli zostanie załadowany jako plik lokalny; trzeba go załadować z serwera WWW.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {packages:["motionchart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Fruit'); data.addColumn('date', 'Date'); data.addColumn('number', 'Sales'); data.addColumn('number', 'Expenses'); data.addColumn('string', 'Location'); data.addRows([ ['Apples', new Date (1988,0,1), 1000, 300, 'East'], ['Oranges', new Date (1988,0,1), 1150, 200, 'West'], ['Bananas', new Date (1988,0,1), 300, 250, 'West'], ['Apples', new Date (1989,6,1), 1200, 400, 'East'], ['Oranges', new Date (1989,6,1), 750, 150, 'West'], ['Bananas', new Date (1989,6,1), 788, 617, 'West'] ]); var chart = new google.visualization.MotionChart(document.getElementById('chart_div')); chart.draw(data, {width: 600, height:300}); } </script> </head> <body> <div id="chart_div" style="width: 600px; height: 300px;"></div> </body> </html>
Wczytuję
Nazwa pakietu google.charts.load
to "motionchart"
.
google.charts.load('current', {'packages': ['motionchart']});
Nazwa klasy wizualizacji to google.visualization.MotionChart
.
var visualization = new google.visualization.MotionChart(container);
Format danych
- Pierwsza kolumna musi mieć typ „string” i zawierać nazwy encji (np. „Apples”, „Oranges” czy „Banans” w przykładzie powyżej).
- Druga kolumna musi zawierać wartości czasu. Czas można podać w dowolnym z tych formatów:
- Rok – typ kolumny: „liczba”. Przykład: 2008.
- Miesiąc, dzień i rok – typ kolumny: „data”. Wartości muszą być instancjami z
Date
JavaScript. - Numer tygodnia – typ kolumny: „string”. Wartości powinny używać wzorca RRRRWW zgodnego ze standardem ISO 8601. Przykład: „2008W03”.
- Kwarter – typ kolumny: „ciąg znaków”. Wartości powinny mieć wzorzec RRRRQq zgodny z normą ISO 8601. Przykład: „2008Q3”.
- Kolejne kolumny mogą mieć typ „number” (numer) lub „string” (ciąg znaków). Kolumny z liczbami pojawią się w menu na osiach X, Y, kolorów i rozmiarów. Kolumny ciągów tekstowych pojawią się w menu w menu Kolor. Zobacz przykład powyżej.
Ustawianie stanu początkowego
Możesz określić, że wykres ruchomy rozpoczyna się od określonego stanu, tj. zbioru wybranych encji i dostosowywania widoku. W tym celu musisz najpierw utworzyć i wyświetlić wykres, a następnie wprowadzić zmiany w stanie, w jakim ma być on wyświetlany (wybrać wartości, zmienić ustawienia itd.), wyeksportować te ustawienia w postaci ciągu znaków i zastosować go w kodzie do opcji „stan”. W następnych dwóch sekcjach opisano, jak eksportować i używać kodu stanu.
- Otwórz działający wykres i wybierz ustawienia, które chcesz przechwycić. Możesz określić ustawienia przezroczystości, powiększania i skalowania w porównaniu do skalowania liniowego.
- Otwórz panel Ustawienia, klikając symbol klucza w prawym dolnym rogu wykresu.
- Kliknij link Zaawansowane w lewym dolnym rogu, aby dodać do zestawu panel Zaawansowane.
- Rozwiń panel Zaawansowane i skopiuj zawartość pola Stan do schowka. Uwaga: zamiast używać menu opisanego w krokach 2–4, możesz wstawić na stronie przycisk wywołujący
getState()
i wyświetlający bieżący stan w polu wiadomości. - Przypisz ciąg stanu skopiowany w poprzednim kroku do parametru opcji „state” (kod) w kodzie, jak pokazano tutaj. Po przesłaniu do metody
draw()
wykres zostanie zainicjowany do stanu określonego podczas uruchamiania.
var options = {}; options['state'] = '{"iconKeySettings":[],"stateVersion":3,"time":"notime","xAxisOption":"_NOTHING","playDuration":15,"iconType":"BUBBLE","sizeOption":"_NOTHING","xZoomedDataMin":null,"xZoomedIn":false,"duration":{"multiplier":1,"timeUnit":"none"},"yZoomedDataMin":null,"xLambda":1,"colorOption":"_NOTHING","nonSelectedAlpha":0.4,"dimensions":{"iconDimensions":[]},"yZoomedIn":false,"yAxisOption":"_NOTHING","yLambda":1,"yZoomedDataMax":null,"showTrails":true,"xZoomedDataMax":null};'; options['width'] = 600; options['height'] = 400; chart.draw(data, options);
Opcje konfiguracji
Nazwa | Typ | Domyślna | Opis |
---|---|---|---|
wysokość | liczba | 300 | Wysokość wykresu w pikselach. |
szerokość | liczba | 500 | Szerokość wykresu w pikselach. |
state | tekst | brak | Wstępny stan wyświetlania wykresu. To zserializowany obiekt JSON opisujący poziom powiększenia, wybrane wymiary, wybrane dymki i inne opisy stanu. Informacje na ten temat znajdziesz w sekcji Ustawianie stanu początkowego. |
pokaż PrzyciskiWykresu | wartość logiczna | prawda | Fałsz ukrywa przyciski sterujące typem wykresu (dymki / linie / kolumny) w prawym górnym rogu. |
Pokaż nagłówek | wartość logiczna | prawda | „false” ukrywa etykietę tytułu encji (pochodną od etykiety pierwszej kolumny w tabeli danych). |
ShowSelectListComponent | wartość logiczna | prawda | Fałsz ukrywa listę widocznych elementów. |
pokażPanel | wartość logiczna | prawda | „false” (ukrywa) prawy panel. |
ShowXMetricPicker | wartość logiczna | prawda | „false” ukrywa selektor danych dla „x”. |
ShowYMetricPicker | wartość logiczna | prawda | „false” ukrywa selektor danych dla „y”. |
ShowXScalePicker | wartość logiczna | prawda | „false” ukrywa selektor wagi na osi x. |
ShowYScalePicker | wartość logiczna | prawda | „false” ukrywa selektor skalowania dla y. |
Pokaż zaawansowane panele | wartość logiczna | prawda | „false” wyłącza segment opcji w panelu ustawień. |
Metody
Metoda | Typ zwracanej wartości | Opis |
---|---|---|
draw(data, options) |
brak | Rysuje wykres za pomocą dostępnych opcji. |
getState() |
tekst | Zwraca bieżący stan wykresu ruchomego zserializowany do ciągu JSON. Aby przypisać ten stan do wykresu, przypisz ten ciąg znaków do opcji state w metodzie draw() . Często używa się go do określania stanu niestandardowego wykresu podczas uruchamiania, zamiast korzystać ze domyślnego stanu. |
Zdarzenia
Nazwa | Opis | Usługi |
---|---|---|
error |
Uruchamiane, gdy podczas próby renderowania wykresu wystąpi błąd. | id, message, |
gotowa | Wykres jest gotowy do wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywołania później | Brak |
zmiana stanu | Użytkownik w jakiś sposób korzystał z wykresu. Aby dowiedzieć się, jaki jest obecny stan wykresu, zadzwoń pod numer getState() . |
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.
Uwagi
Ze względu na ustawienia zabezpieczeń Flash ta wersja (oraz wszystkie wizualizacje oparte na technologii Flash) może nie działać prawidłowo w przypadku uzyskania dostępu z lokalizacji pliku w przeglądarce (np. file:///c:/webhost/myhost/myviz.html), a nie z adresu URL serwera WWW (np. http://www.myhost.com/myviz.html). Jest to zwykle problem testowy. Możesz rozwiązać ten problem zgodnie z opisem na stronie Macromedia.