Wizualizacja: wykres warstwowy (starsza wersja)

Wycofano

Ta wizualizacja została zastąpiona nową wersją. Użyj jej. Aby przeprowadzić migrację, odwiedź stronę Informacje o wersji.

Omówienie

Wykres warstwowy wyświetlany w przeglądarce za pomocą SVG lub VML. Wyświetlaj wskazówki po kliknięciu punktów. Animacja linii podczas klikania wpisów legendy.

Autor: Google

Przykład

Zaprogramuj samodzielnie w sekcji Wizualizacja

<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 i powinna zawierać etykietę kategorii. Dalej można umieścić dowolną liczbę kolumn (wszystkie muszą mieć wartości liczbowe). Każda kolumna jest wyświetlana w osobnym wierszu.

Opcje konfiguracji

Nazwa Typ Domyślna Opis
Kolor osi ciąg znaków lub obiekt kolor domyślny Kolor osi. Możliwe wartości to opcje konfiguracji backgroundColor.
Kolor tła osi ciąg znaków lub obiekt kolor domyślny Obramowanie tła osi. Możliwe wartości to opcje konfiguracji backgroundColor.
FontFontSize liczba automatycznie Rozmiar czcionki tekstu osi wykresu (w pikselach).
colorColor ciąg znaków lub obiekt kolor domyślny Kolor tła głównego obszaru wykresu. Możesz wybrać jedną z tych opcji:
  • Ciąg z kolorem obsługiwany przez kod HTML, np. „czerwony” lub „#00cc00”.
  • Obiekt z właściwościami stroke fill i strokeSize. stroke i fill powinny być ciągiem znaków w kolorze. StylSize to liczba. na przykład: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}. Aby wypełniać tylko bez kreski, użyj stroke:null, strokeSize: 0.
kolor obramowania ciąg znaków lub obiekt kolor domyślny Obramowanie elementów wykresu. Możliwe wartości to opcje konfiguracji backgroundColor.
kolory Tablica ciągów znaków Kolory domyślne Kolory elementów wykresu. Tablica ciągów znaków. Każdy element to ciąg znaków w kolorze obsługiwanym przez HTML, np. „czerwony” lub „#00cc00”.
Włącz wartość logiczna prawda Jeśli ma wartość Prawda, etykietki są wyświetlane, gdy użytkownik kliknie punkt danych.
kolor obramowania zaznaczenia ciąg znaków lub obiekt kolor domyślny Obramowanie wokół zaznaczonych elementów wykresu (wskazane za pomocą myszy). Możliwe wartości to opcje konfiguracji backgroundColor.
wysokość liczba Wysokość kontenera Wysokość wykresu w pikselach.
Jest skumulowany wartość logiczna fałsz Jeśli ma wartość Prawda, wartości wierszy są skumulowane (skumulowane).
legenda tekst „w prawo” Pozycja i typ legendy. Dostępne wartości:
  • „right” (po prawej) – po prawej stronie wykresu.
  • „left” – po lewej stronie wykresu.
  • „top” – powyżej wykresu.
  • „bottom” – pod wykresem.
  • „none” – nie wyświetla się żadna legenda.
legendbackgroundColor ciąg znaków lub obiekt kolor domyślny Kolor tła obszaru legendy na wykresie. Możliwe wartości to opcje konfiguracji backgroundColor.
legendFontSize liczba automatycznie Rozmiar czcionki legendy w pikselach.
legendTextColor ciąg znaków lub obiekt kolor domyślny Kolor tekstu legendy. Możliwe wartości to opcje konfiguracji backgroundColor.
linia_rozmiaru liczba 2 Szerokość linii w pikselach. Aby ukryć wszystkie linie i wyświetlić tylko punkty, wpisz 0.
logScale wartość logiczna fałsz Jeśli ma wartość true (prawda), oś główna powinna być przeskalowana logarytmicznie.
maks. liczba automatycznie Określa najwyższą linię siatki osi Y. Rzeczywista linia siatki będzie większa od dwóch wartości: maksymalnej opcji lub najwyższej wartości danych, zaokrąglona do kolejnego wyższego znaku siatki.
minuta liczba automatycznie Określa najniższą linię siatki osi Y. Rzeczywista linia siatki będzie dolną 2 wartościami: minimalną lub najniższą wartością danych, zaokrągloną w dół do następnego niższego znaku siatki.
PointSize liczba 3 Rozmiar wyświetlanych punktów w pikselach. Aby ukryć wszystkie punkty, wpisz 0.
odwrotna oś wartość logiczna fałsz Jeśli ma wartość Prawda, kategorie są rysowane od prawej do lewej. Domyślne ustawienie to rysowanie od lewej do prawej.
Pokaż kategorie wartość logiczna prawda Jeśli ma wartość true (prawda), etykiety kategorii są wyświetlane. Jeśli ma wartość false (fałsz), nie.
tytuł tekst brak tytułu Tekst do wyświetlenia nad wykresem.
tytuł X tekst brak tytułu Tekst do wyświetlenia pod osią poziomą.
tytułY tekst brak tytułu Tekst do wyświetlenia na osi pionowej.
kolorKoloru ciąg znaków lub obiekt kolor domyślny Kolor tytułu wykresu. Możliwe wartości to opcje konfiguracji backgroundColor.
titleFontSize liczba automatycznie Rozmiar czcionki tytułu wykresu podany w pikselach.

tooltipFontSize		 liczba 11 Rozmiar czcionki tekstu podpowiedzi. Ta właściwość może zostać zmniejszona, jeśli etykietka jest zbyt mała, aby mieścić się w danej czcionce.
wysokość etykietki
 liczba 60 Wysokość etykietki w pikselach. Wysokość etykietki jest stała. Nigdy nie powiększa się ani nie zmniejsza, aby dopasować się do długości lub rozmiaru czcionki tekstu. Jednak co najmniej 1/3 wysokości wykresu zostanie przycięta.
Szerokość etykiety liczba 120 Szerokość etykietki w pikselach. Szerokość etykietki jest stała. Nigdy nie powiększa się ani nie zmniejsza, aby dopasować się do długości lub rozmiaru czcionki tekstu. Jednak wszystkie elementy, które są 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 wyboru Standardowa implementacja getSelection(). Wybrane elementy to elementy kolumn i komórek. Użytkownik może wybrać tylko jedną kolumnę lub komórkę naraz.
setSelection() brak Standardowa implementacja setSelection(), ale obsługuje tylko 1 element. Traktuje wszystkie zaznaczone elementy jako kolumnę lub zaznaczenie komórki. Pamiętaj, że nie można wybrać kolumny etykiety.

Zdarzenia

Nazwa Opis Usługi
onmouseover Uruchamiane, gdy użytkownik najedzie kursorem na punkt, przechodzi w indeksie wiersza i kolumny odpowiedniej komórki. wiersz, kolumna
onmouseout Uruchamiane, gdy użytkownik znajduje się poza wskaźnikiem i przechodzi przez wiersze wiersza i kolumny odpowiedniej komórki. wiersz, kolumna
ready Wykres jest gotowy do wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywoływania po jego narysowaniu, skonfiguruj odbiornik dla tego zdarzenia przed wywołaniem metody draw i wywołaj je dopiero po wywołaniu zdarzenia Brak
select Uruchamiane, gdy użytkownik kliknie punkt lub legendę. Gdy wybrany jest punkt, wybrana jest odpowiednia komórka w tabeli danych. Po wybraniu legendy wybrana jest też odpowiednia kolumna 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 do żadnego serwera.