Wizualizacja: wykres warstwowy (stara wersja)

Wycofano

Ta wizualizacja została zastąpiona nową wersją – korzystaj z niej. Aby ułatwić sobie migrację, zapoznaj się z informacjami o wersji.

Omówienie

Wykres warstwowy renderowany w przeglądarce za pomocą SVG lub VML. Wyświetla wskazówki po kliknięciu punktów. Powoduje animowanie linii po kliknięciu wpisów w legendzie.

Autor: Google

Przykład

Zakoduj go samodzielnie w narzędziu do wizualizacji treści

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["areachart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

Wczytuję

Nazwa pakietu google.load to "areachart".

  google.load("visualization", "1", {packages: ["areachart"]});

Nazwa klasy wizualizacji to google.visualization.AreaChart 

  var visualization = new google.visualization.AreaChart(container);

Format danych

Pierwsza kolumna powinna być ciągiem znaków i zawierać etykietę kategorii. Po niej może następować dowolna liczba kolumn (wszystkie muszą mieć wartości liczbowe). Każda kolumna jest wyświetlana jako osobna linia.

Opcje konfiguracji

Nazwa Typ Domyślne Opis
axisColor string lub Object kolor domyślny Kolor osi. Możliwe wartości są takie same jak wartości opcji konfiguracji backgroundColor.
axisBackgroundColor string lub Object kolor domyślny Obramowanie wokół osi tła. Możliwe wartości są takie same jak wartości opcji konfiguracji backgroundColor.
axisFontSize Liczba automatyczna Rozmiar czcionki tekstu osi wykresu w pikselach.
backgroundColor string lub Object kolor domyślny Kolor tła głównego obszaru wykresu. Dostępne opcje:
  • Ciąg znaków z kolorem obsługiwanym przez kod HTML, na przykład „czerwony” lub „#00cc00”
  • Obiekt z właściwościami stroke fill i strokeSize. stroke i fill powinny być ciągiem znaków i zawierać kolor, a wartość styleSize to liczba. Na przykład: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}. Aby użyć tylko wypełnienia, bez kreski, użyj stroke:null, strokeSize: 0.
borderColor string lub Object kolor domyślny Obramowanie elementów wykresu. Możliwe wartości są takie same jak wartości opcji konfiguracji backgroundColor.
kolory Tablica ciągów Kolory domyślne Kolory elementów wykresu. Tablica ciągów. Każdy element to ciąg znaków w kolorze obsługiwanym przez kod HTML, np. „czerwony” lub „#00cc00”.
enableTooltip boolean prawda Jeśli ma wartość Prawda, etykietki wyświetlają się, gdy użytkownik kliknie punkt danych.
focusBorderColor string lub Object kolor domyślny Obramowanie wokół elementów wykresu, które są zaznaczone (wskazane za pomocą myszy). Możliwe wartości są takie same jak wartości opcji konfiguracji backgroundColor.
wysokość Liczba Wysokość kontenera Wysokość wykresu w pikselach.
isStacked boolean false Jeśli ma wartość Prawda, wartości wierszy są skumulowane (skumulowane).
legenda string, „prawo” Położenie i typ legendy. Dostępne wartości:
  • „w prawo” – z prawej strony wykresu.
  • „left” – po lewej stronie wykresu.
  • „góra” – nad wykresem.
  • „bottom” – pod wykresem.
  • „brak” – nie jest wyświetlana żadna legenda.
legendBackgroundColor string lub Object kolor domyślny Kolor tła obszaru legendy wykresu. Możliwe wartości są takie same jak wartości opcji konfiguracji backgroundColor.
legendFontSize Liczba automatyczna Rozmiar czcionki legendy w pikselach.
legendTextColor string lub Object kolor domyślny Kolor tekstu legendy. Możliwe wartości są takie same jak wartości opcji konfiguracji backgroundColor.
lineSize Liczba 2 Szerokość linii w pikselach. Aby ukryć wszystkie linie i pokazać tylko punkty, wpisz 0.
logScale boolean false Jeśli ma wartość prawda, oś główna powinna być skalowana logarytmicznie.
maksimum Liczba automatyczna Określa najwyższą linię siatki na osi Y. Rzeczywista linia siatki będzie mieć większą z 2 wartości: maksymalną wartość opcji lub najwyższą wartość danych, zaokrągloną w górę do następnego znacznika siatki.
min Liczba automatyczna Określa najniższą linię siatki na osi Y. Rzeczywista linia siatki będzie przedstawiana najniższą z 2 wartości: minimalną lub najniższą wartością danych, zaokrągloną w dół do następnego dolnego znacznika siatki.
pointSize Liczba 3 Rozmiar wyświetlanych punktów w pikselach. Aby ukryć wszystkie punkty, wpisz 0.
reverseAxis boolean false Jeśli zasada ma wartość Prawda, kategorie są rysowane od prawej do lewej. Domyślnie rysowanie od lewej do prawej.
showCategories boolean prawda Jeśli ma wartość true (prawda), etykiety kategorii są wyświetlane. Jeśli ma wartość false (fałsz), nie będzie.
tytuł string, bez tytułu Tekst do wyświetlenia nad wykresem.
titleX string, bez tytułu Tekst wyświetlany pod osią poziomą.
titleY string, bez tytułu Tekst wyświetlany na osi pionowej.
titleColor string lub Object kolor domyślny Kolor tytułu wykresu. Możliwe wartości są takie same jak wartości opcji konfiguracji backgroundColor.
titleFontSize Liczba automatyczna Rozmiar czcionki tytułu wykresu w pikselach.

tooltipFontSize		 Liczba 11 Rozmiar czcionki tekstu etykietki. Wartość ta może się zmniejszyć, jeśli etykietka jest zbyt mała, by pomieścić tekst z określoną czcionką.
tooltipHeight
 Liczba 60 Wysokość etykietki w pikselach. Wysokość etykietki jest stała – nigdy nie będzie powiększana ani pomniejszana, by dopasować się do długości lub czcionki tekstu. Wszystkie elementy większe niż 1/3 wysokości wykresu zostaną przycięte.
tooltipWidth Liczba 120 Szerokość etykietki w pikselach. Szerokość etykietki jest stała – nigdy nie powiększa się ani nie zmniejsza w celu dopasowania do długości lub czcionki tekstu. Wszystkie elementy większe niż szerokość wykresu zostaną przycięte.
szerokość Liczba Szerokość kontenera Szerokość wykresu w pikselach.

Metody

Metoda Typ zwracanej wartości Opis
draw(data, options) brak Rysuje wykres.
getSelection() Tablica elementów zaznaczenia Standardowa implementacja getSelection(). Wybrane elementy to elementy kolumn i komórek. Użytkownik może zaznaczyć tylko jedną kolumnę lub komórkę naraz.
setSelection() brak Standardowa implementacja setSelection(), ale obsługuje wybór tylko 1 elementu. Traktuje każdy wpis zaznaczonego jako kolumnę lub komórkę. Pamiętaj, że nie możesz wybrać kolumny etykiet.

Zdarzenia

Nazwa Opis Właściwości
onmouseover Uruchamiane, gdy użytkownik najedzie kursorem na punkt i przekaże indeksy wierszy i kolumn odpowiedniej komórki. wiersz, kolumna
onmouseout Uruchamiane, gdy użytkownik przesunie kursor myszy na punkt i przekaże indeksy wierszy i kolumn odpowiedniej komórki. wiersz, kolumna
ready 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 draw i wywołuj je dopiero po wywołaniu zdarzenia Brak
select Uruchamiane, gdy użytkownik kliknie punkt lub legendę. Po zaznaczeniu punktu zostaje wybrana odpowiednia komórka w tabeli danych. Zaznaczenie legendy powoduje też wybranie odpowiedniej kolumny w tabeli danych. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer getSelection(). 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.