Wizualizacja: wykres kołowy (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.

  1. Overview
  2. Przykład
  3. Wczytuję
  4. Format danych
  5. Opcje konfiguracji
  6. Metody
  7. Zdarzenia
  8. Zasady dotyczące danych

Omówienie

Wykres kołowy renderowany w przeglądarce za pomocą SVG lub VML. Wyświetla wskazówki po kliknięciu wycinków. Po kliknięciu wpisów w legendzie wycinki są animowane.

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:["piechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
      }
    </script>
  </head>

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

Wczytuję

Nazwa pakietu google.load to "piechart"

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

Nazwa klasy wizualizacji to google.visualization.PieChart 

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

Format danych

Dwie kolumny. Pierwsza kolumna powinna być ciągiem znaków i zawierać etykietę wycinka. Druga kolumna powinna być liczbą i zawierać wartość wycinka.

Opcje konfiguracji

Nazwa Typ Domyślne Opis
backgroundColor string lub Object kolor domyślny Kolor tła głównego obszaru wykresu. Skorzystaj z jednej z tych opcji:
  • Ciąg znaków z kolorem obsługiwanym przez kod HTML, na przykład „czerwony” lub „#00cc00” lub
  • Opis obiektu n o następujących właściwościach:
    • stroke – ciąg koloru HTML opisujący kolor obramowania wykresu.
    • fill – ciąg koloru HTML opisujący kolor tła wykresu.
    • strokeSize – liczba określająca grubość obramowania wykresu (w pikselach). W przypadku braku obramowania wartość tę można ustawić na 0.
      Przykład: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}.
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 lub obiektów Kolory domyślne

Tablica kolorów, w której każdy element określa kolor jednej serii. Należy określić jeden element tablicy dla każdej serii.

  • Jeśli is3D=false, jest to tablica kolorów HTML. Przykład: kolory:['#00FF00','pomarańczowy']
  • W przypadku wartości is3D=true jest to tablica kolorów HTML lub obiektów tego typu: {color:face_color, darker:shade_color}, gdzie color to kolor twarzy elementu, a darker to kolor odcienia. Jeśli jednak określisz kolor HTML dla obiektu 3D, twarz i odcień będą miały ten sam kolor, a efekt 3D zostanie zmniejszony. Przykład: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
enableTooltip boolean prawda Jeśli zasada ma wartość Prawda, etykietki są wyświetlane, gdy użytkownik kliknie wycinek.
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.
is3D boolean false Jeśli ma wartość Prawda, wyświetla wykres trójwymiarowy.
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.
  • „label” – etykiety w pobliżu wycinków.
  • „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.
pieJoinAngle Liczba 0 Każdy wycinek mniejszy od tego kąta zostanie połączony w ogólny wycinek oznaczony etykietą „Inne”.
pieMinimalAngle Liczba 0

Wycinek mniejszy od tego kąta nie zostanie narysowany na wykresie kołowym (ale nadal pojawi się pozycja legendy). Pozostałe wycinki rozwijają się, aby wypełnić pole w stałych proporcjach. Uwaga: może to zniekształcić pozorne wartości, zwłaszcza gdy liczba jest duża, ponieważ ich ilość jest usuwana z koła.

Aby obliczyć rozmiary wycinków, najpierw kąty mniejsze niż koło programu JoinAngle zostały połączone z wycinkiem „Inne”, a następnie rysowane są wszystkie wycinki większe niż minimalnykąt
tytuł string, bez tytułu Tekst do wyświetlenia nad wykresem.
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 wierszy i komórek. Użytkownik może zaznaczyć wiele wierszy lub 1 komórkę naraz.
setSelection() brak Standardowa implementacja setSelection() z obsługą wyboru wielu wierszy lub 1 komórki. Traktuje każdy wpis zaznaczenia jako wiersz lub zaznaczenie komórki.

Zdarzenia

Nazwa Opis Właściwości
onmouseover Uruchamiane, gdy użytkownik najedzie kursorem na wycinek i przekaże indeksy wierszy i kolumn odpowiedniej komórki. wiersz, kolumna
onmouseout Uruchamiane, gdy użytkownik przesunie kursor myszy na wycinek 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 wycinek lub legendę. Po wybraniu wycinka zostanie wybrana odpowiednia komórka w tabeli danych. Po wybraniu legendy zostanie wybrana odpowiednia kolumna w tabeli danych. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer getSelection().

Uwaga: kliknięcie wycinka nie powoduje przełączania między zaznaczaniem a odznaczeniem komórki. Kliknięcie wycinka zawsze go powoduje. Kliknięcie wpisu legendy powoduje natomiast przełączanie między zaznaczaniem i odznaczeniem wiersza.

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.