Wizualizacja: wykres kołowy

Omówienie

Wykres kołowy renderowany w przeglądarce za pomocą SVG lub VML. Po najechaniu kursorem na wycinki wyświetlają się podpowiedzi.

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':['corechart']});
      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 options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Tworzenie wykresu kołowego w 3D

Jeśli ustawisz opcję is3D na true, wykres kołowy zostanie narysowany tak, jakby miał trzy wymiary:

Domyślna wartość to is3D: false, więc wyraźnie ustawiamy ją na true: 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      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 options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Tworzenie wykresu pierścieniowego

Wykres pierścieniowy to wykres kołowy z otworem w środku. Wykresy pierścieni możesz utworzyć za pomocą opcji pieHole:

Opcja pieHole powinna być ustawiona na liczbę z zakresu od 0 do 1, która odpowiada współczynnikowi promienia między otworem a wykresem. W przypadku większości wykresów najbardziej odpowiednie są wartości od 0,4 do 0,6. Wartości równe 1 lub większe, będą ignorowane, a wartość 0 spowoduje całkowitą zamknięcie dziury.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      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 options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Nie możesz łączyć opcji pieHole i is3D. Jeśli to zrobisz, tag pieHole będzie ignorowany.

Pamiętaj, że Arkusze Google starają się umieścić etykietę jak najbliżej środka wycinka. Jeśli masz wykres pierścieniowy z tylko jednym wycinkiem, środek wycinka może się dostać do otworu w pierścieniu. W takim przypadku zmień kolor etykiety:
Opcje
        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };
Pełny kod HTML
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['My all',     100],
        ]);

        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donut_single" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Obracanie wykresu kołowego

Domyślnie wykres kołowy zaczyna się od lewej krawędzi pierwszego wycinka prosto w górę. Aby to zmienić, wybierz pieStartAngle:

Obracamy wykres w prawo o 100 stopni i możesz wybrać opcję pieStartAngle: 100. (Wybrany w ten sposób sposób, w jaki patrzysz na wycinek z włoskiej etykiety).

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['German',  5.85],
          ['French',  1.66],
          ['Italian', 0.316],
          ['Romansh', 0.0791]
        ]);

      var options = {
        legend: 'none',
        pieSliceText: 'label',
        title: 'Swiss Language Use (100 degree rotation)',
        pieStartAngle: 100,
      };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Wydobycie wycinka

Wycinki koła możesz oddzielać od pozostałych wykresów za pomocą właściwości offset opcji slices:

Aby oddzielić wycinek, utwórz obiekt slices i przypisz do niego odpowiedni numer wycinka z offset między 0 a 1. Poniżej przypisujemy stopniowo większe odstępy do wycinków 4 (gudżarati), 12 (marathi), 14 (orija) i 15 (pendżabskich): 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
          ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
          ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
          ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
          ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
          ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
          ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
        ]);

        var options = {
          title: 'Indian Language Use',
          legend: 'none',
          pieSliceText: 'label',
          slices: {  4: {offset: 0.2},
                    12: {offset: 0.3},
                    14: {offset: 0.4},
                    15: {offset: 0.5},
          },
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Usuwanie wycinków

Aby pominąć wycinek, zmień kolor na 'transparent':

Za pomocą pieStartAngle można też obrócić wykres o 135 stopni, pieSliceText usunąć tekst z wycinków, a tooltip.trigger wyłączyć etykietki:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Pac Man', 'Percentage'],
          ['', 75],
          ['', 25]
        ]);

        var options = {
          legend: 'none',
          pieSliceText: 'none',
          pieStartAngle: 135,
          tooltip: { trigger: 'none' },
          slices: {
            0: { color: 'yellow' },
            1: { color: 'transparent' }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('pacman'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="pacman" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Próg widoczności wycinka

Możesz ustawić wartość jako próg dla wycinku koła. Ta wartość odpowiada części wykresu (przy czym cały wykres ma wartość 1). Aby ustawić ten próg jako procent całości, podziel wartość procentową przez 100 (w przypadku progu 20% wartość będzie wynosić 0, 2). 

sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.

Wszystkie wycinki poniżej tego progu zostaną połączone w jeden „Wycinek” i będą mieć wspólną wartość wszystkich wycinków poniżej progu. 

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Pizza');
      data.addColumn('number', 'Populartiy');
      data.addRows([
        ['Pepperoni', 33],
        ['Hawaiian', 26],
        ['Mushroom', 22],
        ['Sausage', 10], // Below limit.
        ['Anchovies', 9] // Below limit.
      ]);

      var options = {
        title: 'Popularity of Types of Pizza',
        sliceVisibilityThreshold: .2
      };

      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

Wczytuję

Nazwa pakietu google.charts.load to "corechart".

  google.charts.load("current", {packages: ["corechart"]});

Nazwa klasy wizualizacji to google.visualization.PieChart. 

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

Format danych

Wiersze: każdy wiersz w tabeli reprezentuje wycinek.

Kolumny:

  Kolumna 0 Kolumna 1 … Kolumna N (opcjonalnie)
Cel: Etykiety wycinka Wartości wycinka … Role opcjonalne
Typ danych: tekst liczba …
Rola: domena dane …
Opcjonalne role kolumn: Brak Brak …

Opcje konfiguracji

Nazwa
backgroundColor,

Kolor tła głównego obszaru wykresu. Może to być prosty ciąg kolorów HTML, taki jak 'red' lub '#00cc00', lub obiekt z tymi właściwościami.

Typ: ciąg znaków lub obiekt
Domyślny: „biały”.
backgroundColor.type

Kolor obramowania wykresu w postaci ciągu kolorów HTML.

Typ: ciąg znaków
Domyślne: „#666”
backgroundColor.rayWidth

Szerokość obramowania w pikselach.

Typ: liczba
Wartość domyślna: 0
backgroundColor.fill

Kolor wypełnienia wykresu w postaci koloru HTML.

Typ: ciąg znaków
Domyślny: „biały”.
obszarGraficzny

Obiekt z użytkownikami do konfigurowania położenia i rozmiaru obszaru wykresu (tam, gdzie rysowany jest sam wykres, z wyłączeniem osi i legend). Obsługiwane są 2 formaty: liczba lub liczba, po której następuje %. Prosta liczba to wartość w pikselach. Liczba, po której następuje %, to wartość procentowa. Przykład: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Typ: obiekt
Domyślne:null
chartArea.backgroundColor.
Kolor tła wykresu. Ciąg może być ciągiem szesnastkowym (np. „#fdc”) lub angielskiej nazwy koloru. Podczas korzystania z tych obiektów możesz podać te właściwości:
  • stroke: kolor podany w postaci szesnastkowej lub nazwy koloru angielskiego.
  • strokeWidth: jeśli ta opcja jest dostępna, rysuje obramowanie wokół obszaru wykresu o danej szerokości i kolorze stroke.
Typ: ciąg znaków lub obiekt
Domyślny: „biały”.
wykresArea.left

Odległość, jaka ma być używana do rysowania wykresu od lewej krawędzi.

Typ: liczba lub ciąg
Ustawienie domyślne: automatyczne
wykresArea.top

Odległość, w jakiej znajduje się wykres od górnej krawędzi.

Typ: liczba lub ciąg
Ustawienie domyślne: automatyczne
chartArea.width

Szerokość obszaru wykresu.

Typ: liczba lub ciąg
Ustawienie domyślne: automatyczne
wykresArea.height

Wysokość obszaru wykresu.

Typ: liczba lub ciąg
Ustawienie domyślne: automatyczne
kolory

Kolory elementów wykresu. Tablica ciągów znaków, w których każdy jest ciągiem koloru HTML, np. colors:['red','#004411'].

Typ: Tablica ciągów znaków
Domyślny: kolory domyślne.
włącz interfejs interaktywny

Określa, czy wykres generuje zdarzenia oparte na użytkownikach lub reaguje na ich interakcje. Jeśli ma wartość false (fałsz), wykres nie zwróci zdarzenia wyboru ani innych zdarzeń związanych z interakcją (ale będzie zwracać zdarzenia lub błędy) ani nie będzie zawierać tekstu wyświetlanego po najechaniu kursorem ani innego działania w zależności od danych wejściowych użytkownika.

Typ: wartość logiczna
Wartość domyślna: true
rozmiar czcionki

Domyślny rozmiar czcionki całego tekstu na wykresie (w pikselach). Możesz zastąpić tę opcję, używając właściwości określonych elementów wykresu.

Typ: liczba
Domyślna:automatycznie.
Czcionka

Domyślny krój czcionki całego tekstu na wykresie. Możesz zastąpić tę opcję, używając właściwości określonych elementów wykresu.

Typ: ciąg znaków
Domyślny: „solarmora”
forceIFrame

Rysuje wykres wewnątrz wbudowanej ramki. (Pamiętaj, że ta opcja jest ignorowana w IE8 – wszystkie wykresy IE8 są ujęte w ramki iFrame).

Typ: wartość logiczna
Wartość domyślna: false
wysokość

Wysokość wykresu w pikselach.

Typ: liczba
Domyślna:wysokość elementu, który go zawiera.
is3D

Jeśli ma wartość true (prawda), wyświetla trójwymiarowy wykres.

Typ: wartość logiczna
Wartość domyślna: false
legenda

Obiekt z użytkownikami do konfigurowania różnych aspektów legendy. Aby określić właściwości tego obiektu, możesz użyć zapisu dosłownego obiektu, jak pokazano tutaj: 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Typ: obiekt
Domyślne: null
legend.alignment,

Wyrównanie legendy. Użyj jednego z tych rodzajów wartości:

  • „start” – dopasowane do początku obszaru przydzielonego do legendy.
  • „center” – wyśrodkowana w obszarze przypisanym do legendy.
  • „end” – wyrównana do końca obszaru przydzielonego do legendy.

Początek, środek i koniec są zależne od stylu legendy (pionowa lub pozioma). Na przykład w legendzie „prawa” odpowiednio „start” i „koniec” znajdują się odpowiednio u góry i u dołu. W przypadku legendy „górny”, „start” i „koniec” znajdziesz odpowiednio po lewej i prawej stronie obszaru.

Wartość domyślna zależy od pozycji legendy. W przypadku legend „bottom” domyślną wartością jest „center”, a w innych legendach – „start”.

Typ: ciąg znaków
Domyślna: automatycznie.
legend.position,

Pozycja legendy. Użyj jednego z tych rodzajów wartości:

  • „bottom” – wyświetla legendę pod wykresem.
  • „labeld” – oznaczone etykietami, które łączą wycinki z wartościami danych.
  • „left” – wyświetla legendę po lewej stronie wykresu.
  • „none” – brak legendy.
  • „right” (prawo) – wyświetla legendę po prawej stronie wykresu.
  • „u góry” – wyświetla legendę nad wykresem.
Typ: ciąg znaków
Domyślny: „right”
legend.maxLines

Maksymalna liczba wierszy w legendzie. Ustaw większą liczbę niż 1, aby dodać wiersze do legendy. Uwaga: dokładna logika używana do określenia rzeczywistej liczby renderowanych linii jest nadal zmienna.

Ta opcja obecnie działa tylko wtedy, gdy pole legend.position ma wartość „top”.

Typ: liczba
Wartość domyślna: 1
legend.textStyle,

Obiekt określający styl tekstu legendy. Obiekt ma taki format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color może być dowolnym ciągiem koloru HTML, na przykład: 'red' lub '#00cc00'. Zobacz też fontName i fontSize.

Typ: obiekt
Domyślnie: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
PieHole

Jeśli mieści się w zakresie od 0 do 1, wyświetla wykres pierścieniowy. Otwór w promieniu ma wartość number pomnożoną przez promień wykresu.

Typ: liczba
Wartość domyślna: 0
KolorCiastoelementuBlice

Kolor obramowania wycinka. Ma zastosowanie tylko wtedy, gdy wykres jest dwuwymiarowy.

Typ: ciąg znaków
Domyślny: „biały”.
Tekst wycinka koła

Treść tekstu wyświetlanego na wycinku. Użyj jednego z tych rodzajów wartości:

  • „percentage” – procent rozmiaru wycinka z całości.
  • „wartość” – wartość ilościowa wycinka.
  • „label” – nazwa wycinka.
  • „none” – brak tekstu.
Typ: ciąg znaków
Wartość domyślna: „percentage”
Styl tekstu ciasta

Obiekt określający styl tekstu wycinka. Obiekt ma taki format:

{color: <string>, fontName: <string>, fontSize: <number>}

color może być dowolnym ciągiem koloru HTML, na przykład: 'red' lub '#00cc00'. Zobacz też fontName i fontSize.

Typ: obiekt
Domyślnie: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Kąt wycinka koła

Kąt w stopniach, w którym wykres ma zostać obrócony. Domyślna wartość 0 tworzy skrajną lewą krawędź pierwszego wycinka bezpośrednio w górę.

Typ: liczba
Domyślne: 0
odwrócone kategorie

Jeśli ma wartość Prawda, wycinki rysują w lewo. Wartość domyślna to rysowanie w prawo.

Typ: wartość logiczna
Wartość domyślna: false
Kolor wycinka koła

Kolor wycinka z kombinacjami, który zawiera wszystkie wycinki poniżej sliceVisibleThreshold.

Typ: ciąg znaków
Domyślny: „#ccc”
Etykieta wycinka koła

Etykieta wycinka kombinacji, który zawiera wszystkie wycinki poniżej sliceVisibleThreshold.

Typ: ciąg znaków
Domyślny: „Inny”
wycinki

Tablica obiektów, z których każdy opisuje odpowiedni format wycinka koła. Aby użyć wartości domyślnych dla wycinka, podaj pusty obiekt (np. {}). Jeśli nie podasz wycinka lub wartości, zostanie użyta wartość globalna. Każdy obiekt obsługuje te właściwości:

  • color – kolor, który ma być używany na potrzeby tego wycinka. Określ prawidłowy ciąg kolorów HTML.
  • offset – jak daleko od części ciasta będzie oddzielać wycinek od 0,0 (w ogóle) do 1,0 (promienie koła).
  • textStyle – zastępuje globalny element pieSliceTextStyle dla tego wycinka.

Możesz podać tablicę obiektów, z których każdy dotyczy wycinka w podanej kolejności, lub obiekt, w którym każdy element podrzędny ma klucz liczbowy wskazujący wycinek, którego dotyczy. Na przykład te 2 deklaracje są identyczne i zadeklarują pierwszy wycinek jako czarny, a czwarty jako czerwony: 

slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
Typ: tablica obiektów lub obiektów z zagnieżdżonymi obiektami
Domyślnie: {}
Próg widoczności wycinka

Wartość ułamkowa koła, poniżej której wycinek nie będzie wyświetlany osobno. Wszystkie wycinki, które nie osiągnęły tego progu, zostaną połączone w jeden „wycinek”, którego rozmiar jest sumą wszystkich rozmiarów. Domyślnie nie pokazujemy osobno żadnego wycinka o długości mniejszej niż pół stopnia. 

// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
Typ: liczba
Wartość domyślna: połowa stopnia (0,5/360, 1/720 lub 0,0014)
tytuł

Tekst do wyświetlenia nad wykresem.

Typ: ciąg znaków
Domyślnie:bez tytułu.
stylTextTextStyle

Obiekt określający styl tekstu tytułu. Obiekt ma taki format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color może być dowolnym ciągiem koloru HTML, na przykład: 'red' lub '#00cc00'. Zobacz też fontName i fontSize.

Typ: obiekt
Domyślnie: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
etykietka

Obiekt z członkami, który służy do konfigurowania różnych elementów etykietek. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w sposób przedstawiony poniżej: 

{textStyle: {color: '#FF0000'}, showColorCode: true}
Typ: obiekt
Domyślne: null
tooltip.ignoreBounds

Jeśli ustawiona jest wartość true, rysunki etykiet mogą wychodzić poza granice wykresu ze wszystkich stron.

Uwaga: dotyczy to tylko etykietek HTML. Jeśli ta opcja jest włączona w przypadku etykietek SVG, wszystkie nadmiary wykraczające poza granice wykresu zostaną przycięte. Więcej informacji znajdziesz w artykule Dostosowywanie zawartości etykietki.

Typ: wartość logiczna
Wartość domyślna: false
tooltip.isHtml

Jeśli ma wartość Prawda, używaj etykiet z renderowaniem HTML (a nie z elementami renderowanymi w formacie SVG). Więcej informacji znajdziesz w artykule Dostosowywanie zawartości etykietki.

Uwaga: wizualizacja wykresu bąbelkowego nie obsługuje dostosowywania zawartości etykietki HTML za pomocą roli danych kolumny etykietki.

Typ: wartość logiczna
Wartość domyślna: false
tooltip.showColorCode

Jeśli ma wartość true (prawda), pokazuj kolorowe kwadraty obok informacji o wycinku w etykietce.

Typ: wartość logiczna
Wartość domyślna: false
tooltip.text

Informacje wyświetlane po najechaniu kursorem myszy na wycinek koła. Obsługiwane są te wartości:

  • „both” – [wartość domyślna] wyświetla bezwzględną część wycinka i wartość procentową całej całości.
  • „value” – wyświetla tylko bezwzględną wartość wycinka.
  • „percentage” – wyświetla tylko odsetek całości reprezentowanej przez wycinek.
Typ: ciąg znaków
Wartość domyślna: „both”
tooltip.textStyle

Obiekt określający styl tekstu etykietki. Obiekt ma taki format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color może być dowolnym ciągiem koloru HTML, na przykład: 'red' lub '#00cc00'. Zobacz też fontName i fontSize.

Typ: obiekt
Domyślnie: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

Interakcja użytkownika, która powoduje wyświetlenie etykietki:

  • „focus” – etykietka jest wyświetlana, gdy użytkownik najedzie kursorem na element.
  • „none” – etykietka nie będzie wyświetlana.
  • „selection” – etykietka będzie wyświetlana, gdy użytkownik wybierze element.
Typ: ciąg znaków
Domyślny: „focus”
szerokość

Szerokość wykresu w pikselach.

Typ: liczba
Domyślna – szerokość elementu, który zawiera.

Metody

Metoda
draw(data, options)

Rysuje wykres. Wykres akceptuje dalsze wywołania metody dopiero po wywołaniu zdarzenia ready. Extended description,

Typ zwrotu: brak
getAction(actionID)

Zwraca obiekt działania etykietki z wymaganym parametrem actionID.

Typ zwrotu: obiekt
getBoundingBox(id)

Zwraca obiekt zawierający lewą, górną, szerokość i wysokość elementu wykresu id. Format elementu id nie został jeszcze udokumentowany (to wartości zwracane przez moduły obsługi zdarzeń), ale Oto kilka przykładów:

var cli = chart.getChartLayoutInterface();

Wysokość obszaru wykresu
cli.getBoundingBox('chartarea').height
Szerokość trzeciego słupka w pierwszej serii wykresu słupkowego lub kolumnowego
cli.getBoundingBox('bar#0#2').width
Ramka ograniczająca piątej podkładki klinowej do wykresu kołowego
cli.getBoundingBox('slice#4')
Ramka ograniczająca dane z wykresu pionowego (np. kolumny):
cli.getBoundingBox('vAxis#0#gridline')
Ramka ograniczająca danych na wykresie poziomym (np. słupkowym):
cli.getBoundingBox('hAxis#0#gridline')

Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu.

Typ zwrotu: obiekt
getChartAreaBoundingBox()

Zwraca obiekt zawierający lewą, górną, szerokość i wysokość zawartości wykresu (tzn. z wyłączeniem etykiet i legend):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu.

Typ zwrotu: obiekt
getChartLayoutInterface()

Zwraca obiekt zawierający informacje o umieszczonym na ekranie miejscu na wykresie i jego elementach.

W zwróconym obiekcie można wywołać te metody:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

Wywołuj je po narysowaniu wykresu.

Typ zwrotu: obiekt
getHAxisValue(xPosition, optional_axis_index)

Zwraca poziomą wartość danych w miejscu xPosition, czyli w pikselach odsunięcie od lewej krawędzi kontenera wykresu. Może być ujemny.

Przykład: chart.getChartLayoutInterface().getHAxisValue(400).

Wywołuj je po narysowaniu wykresu.

Typ zwrotu: numer
getImageURI()

Zwraca wykres zserializowany jako identyfikator URI obrazu.

Wywołuj je po narysowaniu wykresu.

Patrz Drukowanie wykresów PNG.

Typ zwrotu: ciąg znaków
getSelection()

Zwraca tablicę wybranych elementów wykresu. Elementy, które można wybrać, to wycinki i wpisy legend. Na tym wykresie w danym momencie możesz wybrać tylko 1 element. Extended description.

Typ zwrotu: tablica elementów wyboru.
getVAxisValue(yPosition, optional_axis_index)

Zwraca pionową wartość danych w miejscu yPosition, czyli w pikselach odsunięcia od górnej krawędzi kontenera wykresu. Może być ujemny.

Przykład: chart.getChartLayoutInterface().getVAxisValue(300).

Wywołuj je po narysowaniu wykresu.

Typ zwrotu: numer
getXLocation(dataValue, optional_axis_index)

Zwraca współrzędną x piksela dataValue względem lewej krawędzi kontenera wykresu.

Przykład: chart.getChartLayoutInterface().getXLocation(400).

Wywołuj je po narysowaniu wykresu.

Typ zwrotu: numer
getYLocation(dataValue, optional_axis_index)

Zwraca współrzędną Y piksela dataValue względem górnej krawędzi kontenera.

Przykład: chart.getChartLayoutInterface().getYLocation(300).

Wywołuj je po narysowaniu wykresu.

Typ zwrotu: numer
removeAction(actionID)

Usuwa z wykresu etykietkę z żądaniem actionID.

Typ zwrotu: none
setAction(action)

Ustawia działanie etykietki do wykonania, gdy użytkownik kliknie tekst działania.

Metoda setAction przyjmuje obiekt jako parametr działania. Ten obiekt powinien określać 3 właściwości: id – identyfikator ustawianego działania, text – tekst, który powinien pojawić się w etykiecie działania, oraz action, funkcję, która powinna być uruchamiana, gdy użytkownik kliknie tekst działania.

Przed wywołaniem metody draw() wykresu należy ustawić dowolne i wszystkie działania dotyczące etykietek. Rozszerzony opis.

Typ zwrotu: none
setSelection()

Zaznacza określone elementy wykresu. Anuluje poprzedni wybór. Elementy, które można wybrać, to wycinki i wpisy legend. Na tym wykresie możesz wybrać tylko jeden element naraz. Extended description.

Typ zwrotu: brak
clearChart()

Czyści wykres i usuwa wszystkie przydzielone zasoby.

Typ zwrotu: brak

Zdarzenia

Więcej informacji o korzystaniu z tych zdarzeń znajdziesz w artykułach Podstawowe funkcje interaktywne, Obsługa zdarzeń i Uruchamianie zdarzeń.

Nazwa
click

Uruchamiane, gdy użytkownik kliknie wykres. Można jej użyć do określenia, kiedy kliknięty jest tytuł, elementy danych, wpisy legendy, osie, linie siatki lub etykiety.

Właściwości: targetID
error

Uruchamiane, gdy podczas próby renderowania wykresu wystąpi błąd.

Właściwości: id, message
onmouseover

Uruchamiane, gdy użytkownik najedzie kursorem na jednostkę wizualną. Zwraca indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Wpis wycinka lub legendy odpowiada wierszowi w tabeli danych (indeks kolumny ma wartość null).

Właściwości: wiersz, kolumna.
onmouseout

Uruchamiane, gdy użytkownik odsunie kursor od jednostki wizualnej. Zwraca indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Wpis wycinka lub legendy odpowiada wierszowi w tabeli danych (indeks kolumny ma wartość null).

Właściwości: wiersz, kolumna.
ready

Wykres jest gotowy do wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywoływania po narysowaniu, musisz skonfigurować odbiornik tego zdarzenia przed wywołaniem metody draw i wywołanie ich dopiero po uruchomieniu zdarzenia.

Właściwości: brak
select

Uruchamiane, gdy użytkownik kliknie element wizualny. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer getSelection().

Właściwości: 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.