Wizualizacja: wykres kołowy (obraz)

Ważne: 20 kwietnia 2012 r. część Grafiki na wykresach została oficjalnie wycofana. Będzie nadal działać zgodnie z naszymi zasadami wycofywania.

Omówienie

Wykres kołowy, który jest renderowany jako obraz za pomocą Google Charts API.

Przykład

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagepiechart"]});
      google.charts.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.ImagePieChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Wczytuję

Nazwa pakietu google.charts.load to "imagepiechart":

  google.charts.load('current', {packages: ['imagepiechart']});

Nazwa klasy wizualizacji to google.visualization.ImagePieChart

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

Format danych

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

Opcje konfiguracji

W ramach obiektu option przekazywanego w metodzie draw() wizualizacji można podać następujące opcje.

Nazwa Typ Domyślna Opis
backgroundColor, tekst „#FFFFFF” (biały) Kolor tła wykresu w formacie koloru interfejsu Chart API.
kolor tekst Automatycznie Określa kolor podstawowy, który ma być używany w przypadku wszystkich serii. Każda seria będzie gradacją wybranego koloru. Kolory są określane w formacie koloru Chart API. Ignorowane, jeśli określono właściwość colors.
kolory Tablica<string> Automatycznie Użyj tej opcji, aby przypisać konkretne kolory do każdej serii danych. Kolory są określane w formacie koloru interfejsu Chart API. Kolor i jest używany w kolumnie danych i, a jeśli jest więcej kolumn danych niż kolory, dochodzi do początku. Jeśli wszystkie wersje jednego koloru są dopuszczalne dla wszystkich serii, użyj opcji color.
włączanie zdarzeń wartość logiczna fałsz Powoduje, że wykresy powodują zdarzenia wywoływane przez użytkowników, takie jak kliknięcie lub przesunięcie kursora myszy. Obsługiwane tylko w przypadku określonych typów wykresów. Patrz Wydarzenia poniżej.
wysokość liczba Wysokość kontenera Wysokość wykresu w pikselach.
is3D wartość logiczna fałsz Jeśli ma wartość Prawda, wyświetla trójwymiarowy wykres.
etykiety tekst „brak”

Etykieta (jeśli jest widoczna) dla każdego wycinka. Wybierz jedną z tych wartości:

  • „none” – brak etykiet.
  • „value” – jako wartości użyj wartości wycinka.
  • „name” – użyj nazwy wycinka (nazwy kolumny).
legenda tekst „w prawo” Lokalizacja legendy na wykresie. Wybierz jedną z następujących wartości: „top”, „bottom”, „left”, „right” lub „none”.
tytuł tekst brak tytułu Tekst do wyświetlenia nad wykresem.
szerokość liczba Szerokość kontenera Szerokość wykresu w pikselach.

Metody

Metoda Typ zwracanej wartości Opis
draw(data, options) brak Rysuje wykres.

Zdarzenia

Możesz zarejestrować się, by usłyszeć zdarzenia opisane na stronie Ogólny wykres graficzny.

Zasady dotyczące danych

Więcej informacji znajdziesz w zasadach rejestrowania interfejsu Chart API.