Wizualizacja: wykres kołowy (obraz)

Ważne: 20 kwietnia 2012 r. oficjalnie wycofano z narzędzi Google Chart API sekcja Wykresy graficzne. Nadal będzie działać zgodnie z naszymi zasadami dotyczącymi wycofywania.

  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 jako obraz za pomocą interfejsu 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 znaków i zawierać etykietę wycinka. Druga kolumna powinna być liczbą i zawierać wartość wycinka.

Opcje konfiguracji

W obiekcie options przekazywanym do metody draw() wizualizacji możesz określić te opcje.

Nazwa Typ Domyślne Opis
backgroundColor string, '#FFFFFF' (biała) Kolor tła wykresu w formacie kolorów interfejsu Chart API.
kolor string, Automatycznie Określa kolor podstawowy, który ma być używany dla wszystkich serii. Każda seria będzie gradacją wybranego koloru. Kolory określa się w formacie kolorów interfejsu Chart API. Ignorowana, jeśli określono colors.
kolory Tablica<ciąg> Automatycznie Służy do przypisywania określonych kolorów każdej serii danych. Kolory określa się w formacie kolorów interfejsu Chart API. Kolor i jest używany w kolumnie danych I. Jeśli kolumn danych jest więcej niż kolorów, zakres jest zawijany do początku. Jeśli odmiany jednego koloru są dozwolone w przypadku wszystkich serii, użyj opcji color.
enableEvents boolean false Powoduje, że wykresy wywołują zdarzenia wywoływane przez użytkownika, takie jak kliknięcie lub najechanie kursorem myszy. Obsługiwane tylko w przypadku określonych typów wykresów. Zobacz Zdarzenia poniżej.
wysokość Liczba Wysokość kontenera Wysokość wykresu w pikselach.
is3D boolean false Jeśli ma wartość Prawda, wyświetla wykres trójwymiarowy.
etykiety string, „none” (brak)

Jaka etykieta ma być wyświetlana w przypadku każdego wycinka. Wybierz jedną z tych wartości:

  • „brak” – brak etykiet.
  • „value” – użyj wartości wycinka jako etykiety.
  • „nazwa” – użyj nazwy wycinka (nazwy kolumny).
legenda string, „prawo” Lokalizacja legendy na wykresie. Wybierz jedną z tych wartości: „top”, „bottom”, „left”, „right” (prawo) lub „none” (brak).
tytuł string, bez 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 się zarejestrować, aby słyszeć zdarzenia opisane na stronie Ogólny wykres obrazu.

Zasady dotyczące danych

Zapoznaj się z zasadami logowania interfejsu Chart API.