Wizualizacja: wykres ruchomy

  1. Overview
  2. Przykład
  3. Wczytuję
  4. Ustawianie stanu początkowego
  5. Format danych
  6. Opcje konfiguracji
  7. Metody
  8. Zdarzenia
  9. Zasady dotyczące danych
  10. Notes

Omówienie

Wykres dynamiczny badający kilka wskaźników w czasie. Wykres jest renderowany w przeglądarce za pomocą Flasha.

Uwaga dla programistów: ze względu na ustawienia zabezpieczeń Flasha to (wraz ze wszystkimi wizualizacjami opartymi na Flashu) może nie działać prawidłowo, gdy otworzysz plik z poziomu lokalizacji pliku w przeglądarce (np. file:///c:/webhost/myhost/myviz.html), a nie z adresu URL serwera WWW (np. http://www.mojhost.com/myviz.html). Zazwyczaj jest to problem związany tylko z testowaniem. Możesz rozwiązać ten problem w sposób opisany na stronie Adobe.

Przykład

Ten kod nie będzie działać po wczytaniu jako plik lokalny. Musisz go wczytać 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 być typu „ciąg znaków” i zawierać nazwy jednostek (np. „Jabłka”, „Pomarańcze”, „Banany” w przykładzie powyżej).
  • Druga kolumna musi zawierać wartości czasu. Czas może być wyrażony w dowolnym z tych formatów:
    • Rok – typ kolumny: „liczba”. Przykład: 2008.
    • Miesiąc, dzień i rok – typ kolumny: „data”. Wartościami powinny być wystąpieniami Date w JavaScripcie.
    • Numer tygodnia – typ kolumny: „ciąg znaków”. Wartości powinny mieć format RRRRWww zgodny z normą ISO 8601. Przykład: „2008W03”.
    • Kwartał – typ kolumny: „ciąg znaków”. Wartości powinny mieć format RRRRQq zgodny ze standardem ISO 8601. Przykład: „2008Q3”.
  • Kolejne kolumny mogą być typu „liczba” lub „ciąg znaków”. Kolumny z liczbami pojawią się w menu dla osi X, Y, Kolor i Rozmiar. Kolumny z ciągami znaków pojawią się tylko w menu Kolor. Zobacz przykład powyżej.

Ustawianie stanu początkowego

Możesz określić, że wykres ruchomy zaczyna się od określonego stanu, czyli zbioru wybranych elementów i wyświetlania dostosowań. W tym celu musisz najpierw utworzyć i wyświetlić wykres, następnie wprowadzić dowolne zmiany stanu, które mają być widoczne na wykresie (wybrać wartości, zmienić ustawienia itp.), wyeksportować te ustawienia jako ciąg znaków, a na koniec użyć tego ciągu znaków w kodzie, przypisując go do opcji „stan”. W następnych 2 sekcjach opisano sposób eksportowania i używania kodu stanu.

  1. Otwórz wykres roboczy i ustaw ustawienia, które chcesz przechwytywać. Możesz określić ustawienia obejmujące poziomy przezroczystości, powiększenie i skalowanie logu w porównaniu z skalowaniem liniowym.
  2. Otwórz panel Ustawienia, klikając symbol klucza w prawym dolnym rogu wykresu.
  3. W lewym dolnym rogu kliknij link Zaawansowane, aby dodać do zestawu panel Zaawansowane.
  4. Rozwiń panel Zaawansowane i skopiuj do schowka zawartość pola State (Stan). (Uwaga: zamiast korzystać z menu opisanego w krokach 2–4, możesz wstawić na stronie przycisk, który wywołuje funkcję getState() i wyświetla bieżący stan w polu wiadomości).
  5. Przypisz ciąg stanu skopiowany w poprzednim kroku do parametru opcji „state” w kodzie, jak pokazano tutaj. Po przekazaniu 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ślne Opis
wysokość Liczba 300 Wysokość wykresu w pikselach.
szerokość Liczba 500 Szerokość wykresu w pikselach.
state string, brak Początkowy stan wyświetlania wykresu. To zserializowany obiekt JSON, który opisuje poziom powiększenia, wybrane wymiary, wybrane dymki/elementy i inne opisy stanów. Informacje o tym, jak to ustawić, znajdziesz w sekcji Ustawianie stanu początkowego.
showChartButtons boolean prawda Wartość false ukrywa przyciski sterujące typem wykresu (dymki / linie / kolumny) w prawym górnym rogu.
showHeader boolean prawda Wartość false ukrywa etykietę tytułu elementów (pochodzącą z etykiety pierwszej kolumny w tabeli danych).
showSelectListComponent boolean prawda Wartość false ukrywa listę widocznych elementów.
showSidePanel boolean prawda Wartość false ukrywa prawy panel.
showXMetricPicker boolean prawda Wartość false ukrywa selektor danych dla wartości x.
showYMetricPicker boolean prawda Wartość false ukrywa selektor danych dla wartości y.
showXScalePicker boolean prawda Wartość false ukrywa selektor skali dla X.
showYScalePicker boolean prawda Wartość false ukrywa selektor skali dla y.
showAdvancedPanel boolean prawda false wyłącza przedział opcji w panelu ustawień.

Metody

Metoda Typ zwracanej wartości Opis
draw(data, options) brak Rysuje wykres przy użyciu dostępnych opcji.
getState() string, Zwraca bieżący state wykresu ruchomego zserializowanego do ciągu JSON. Aby przypisać ten stan do wykresu, przypisz ten ciąg do opcji state w metodzie draw(). Często jest on używany do określania niestandardowego stanu wykresu podczas uruchamiania, zamiast użycia stanu domyślnego.

Zdarzenia

Nazwa Opis Właściwości
error Uruchamiane, gdy podczas próby wyrenderowania wykresu wystąpi błąd. identyfikator, wiadomość
gotowa 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 rysowania i używaj ich dopiero po wywołaniu zdarzenia. Brak
zmiana stanu Użytkownik wszedł w interakcję z wykresem. Wywołaj metodę getState(), aby poznać bieżący stan wykresu. 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.

Uwagi

Ze względu na ustawienia zabezpieczeń Flash ten element (podobnie jak wszystkie wizualizacje oparte na Flashu) może nie działać prawidłowo, gdy zostanie otwarty z lokalizacji pliku w przeglądarce (np. file:///c:/webhost/myhost/myviz.html), a nie z adresu URL serwera WWW (np. http://www.mojhost.com/myviz.html). Zazwyczaj jest to tylko problem testowy. Możesz rozwiązać ten problem w sposób opisany w witrynie Macromedia.