Wizualizacja: wykres ruchomy

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.

  1. 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.
  2. Otwórz panel Ustawienia, klikając symbol klucza w prawym dolnym rogu wykresu.
  3. Kliknij link Zaawansowane w lewym dolnym rogu, aby dodać do zestawu panel Zaawansowane.
  4. 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.
  5. 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.