Wizualizacja: ogólny wykres graficzny

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łady
  3. Wczytuję
  4. Format danych
  5. Opcje konfiguracji
  6. Metody
  7. Zdarzenia
  8. Zasady dotyczące danych
  9. Lokalizacja

Omówienie

Ogólny wykres graficzny to ogólny kod dla wszystkich wykresów tworzonych przez Google Chart API. Zanim użyjesz tej wizualizacji, przeczytaj dokumentację interfejsu Chart API. Pamiętaj, że za pomocą tej wizualizacji możesz wysłać nawet 16 tys. danych, w przeciwieństwie do limitu 2 tys. w bezpośrednich wywołaniach interfejsu Chart API.

Wszystkie dane są przekazywane do wykresów za pomocą DataTable lub DataView. Dodatkowo niektóre etykiety są przekazywane jako kolumny w tabeli danych.

Wszystkie pozostałe parametry adresu URL interfejsu Chart API (oprócz chd) są przekazywane jako opcje.

Autor: Google

Przykłady

Oto przykłady kilku różnych typów wykresów.

Wykres liniowy

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addColumn('string');

        // Row data is [chl, data point, point label]
        dataTable.addRows([
        ['January',40,undefined],
        ['February',60,'Initial recall'],
        ['March',60,'Product withdrawn'],
        ['April',45,undefined],
        ['May',47,'Relaunch'],
        ['June',75,undefined],
        ['July',70,undefined],
        ['August',72,undefined]
        ]);

        var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};

        var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='line_div'></div>
  </body>
</html>

Pionowy wykres słupkowy

Pamiętaj, że na zapakowanych wykresach słupkowych nie musisz określać parametru chxt=„x”, tak jak w przypadku samodzielnego wywoływania wykresu. Jeśli nie określisz osi, ogólny wykres graficzny spróbuje skonfigurować go prawidłowo.

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
          chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};

        var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='bar_div'></div>
  </body>
</html>

wykres kołowy,

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['January',12],
          ['February',8],
          ['March',3]
        ]);

        var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
          colors:['#3399CC','#00FF00','#0000FF']};

        var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='pie_div'></div>
  </body>
</html>

Wykres radarowy

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [100,10],
          [80,20],
          [60,30],
          [30,40],
          [25,50],
          [20,60],
          [10,70]
        ]);

        var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));

        var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='radar_div'></div>
  </body>
</html>

Wykres mapy

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
      google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['DZ',0],
          ['EG',50],
          ['MG',50],
          ['GM',35],
          ['KE',100],
          ['ZA',100]
        ]);

        var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
        var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
<body>
    <div id='map_div'></div>
</body>
</html>

Wczytuję

Nazwa pakietu google.charts.load to „imagechart”

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

Nazwa klasy wizualizacji to google.visualization.ImageChart

  var visualization = new google.visualization.ImageChart(container_div);

Format danych

Istnieją 2 ogólne formaty danych: jeden dla wykresów mapy i jeden dla wszystkich pozostałych wykresów. Jedynym formatem liczbowym obsługiwanym w przypadku danych jest typ numeru JavaScript.

Uwaga: nie koduj w adresie URL wartości ciągów znaków przekazywanych jako dane lub opcje.

Wykresy map

Na wykresie mapowym tabela danych zawiera 2 wymagane kolumny:

  • Pierwsza kolumna – [ciąg znaków] Kod kraju lub regionu.
  • Druga kolumna – [liczba] wartość dla danego kraju lub województwa.

Więcej informacji znajdziesz w dokumentacji wykresu map.

Wykresy inne niż mapy

Wykresy inne niż mapy przyjmują tabelę danych z 2 opcjonalnymi kolumnami (jedną na początku i jedną na końcu) oraz z co najmniej 1 kolumną między nimi:

  • Pierwsza kolumna – [opcjonalnie, ciąg znaków] Każdy wpis reprezentuje etykietę używaną na osi X (odpowiednik parametru chl lub chxl) na potrzeby wykresów, które go obsługują.
  • Następne kolumny – dowolna liczba kolumn liczbowych, z których każda reprezentuje serię danych.
  • Ostatnie kolumny – [opcjonalnie, ciąg znaków] dowolna liczba kolumn z ciągami znaków po kolumnach danych, gdzie każdy wpis reprezentuje etykietę punktu danych w przypadku wykresów, które ją obsługują. Jeśli chcesz użyć tej kolumny, musisz wybrać opcję annotationColumns.

Dane są wyświetlane na różne sposoby w zależności od typu wykresu. Zapoznaj się z dokumentacją wykresu.

Uwaga na temat indeksów kolumn: wizualizacja ogólnego wykresu graficznego usuwa kolumny z ciągami znaków z tabeli danych przed wysłaniem jej do usługi Chart API. Dlatego indeksy kolumn w opcjach, metodach i zdarzeniach zdefiniowanych na tej stronie obejmują kolumny z ciągami znaków w liczbie indeksów. Indeksy kolumn we wszystkich opcjach obsługiwanych przez usługę interfejsu Chart API (np. opcja chm) ignorują kolumny z ciągami znaków w liczbie indeksów.

Opcje konfiguracji

Na potrzeby tej wizualizacji określono podane niżej opcje. Określ je w obiekcie options przekazywanym do metody draw() wizualizacji. Nie wszystkie z tych opcji są obsługiwane w przypadku wszystkich typów wykresów. Zapoznaj się z dokumentacją typu wykresu z obrazem statycznym. Możesz przekazać dowolny parametr adresu URL interfejsu Chart API. Na przykład parametr adresu URL chg=50,50 z wizualizacji na wykresie zostałby określony w ten sposób: options['chg'] = '50,50'.

Uwaga na temat kolorów: opcje kolorów, takie jak colors, color i backgroundColor, są określone w formacie kolorów interfejsu Chart API. Ten format jest podobny do formatu #RRGGBB z tą różnicą, że zawiera opcjonalną czwartą liczbę szesnastkową wskazującą przezroczystość. Kolory zrozumiałe dla człowieka, takie jak „czerwony”, „zielony”, „niebieski” itd., nie są obsługiwane. Format kolorów interfejsu Chart API nie zawiera początkowego symbolu #, ale ogólne opcje wizualizacji wykresu graficznego akceptują kody kolorów ze znakiem # lub bez niego.

Nazwa Typ Domyślne Opis
annotationColumns Array<object> brak

Etykiety punktów danych dla różnych typów wykresów. Jest to tablica obiektów, z których każdy przypisuje sformatowaną etykietę do jednego punktu danych na wykresie. Ta opcja jest dostępna tylko w przypadku wykresów, które obsługują punkty danych (aby dowiedzieć się, które z nich, sprawdź w powiązanym temacie), a tabela danych musi zawierać co najmniej 1 kolumnę etykiet z ciągami znaków.

Każdy obiekt w tablicy ma te właściwości:

  • column [liczba] – liczony od zera indeks kolumny zawierającej tekst użyty w adnotacji. Nie potrzebujesz wartości w każdym wierszu tej kolumny.
  • positionColumn [liczba] – liczony od zera indeks kolumny zawierającej punkt danych oznaczony etykietą. Wartością domyślną jest pierwsza kolumna danych.
  • color [ciąg znaków] – kolor tekstu adnotacji w formacie kolorów interfejsu Chart API. Wartość domyślna to „#000000” (czarny).
  • size [liczba] – rozmiar czcionki adnotacji w pikselach.
  • priority [ciąg znaków] – „low”, „średni” lub „wysoka” określająca warstwę, w której ma zostać narysowana etykieta. Wartość domyślna to „medium”, co oznacza, że etykieta jest rysowana po słupkach i liniach, ale przed innymi etykietami.
  • type [ciąg znaków] – „tekst” lub „flaga”. „text” tworzy adnotację w postaci zwykłego tekstu, a „flag” – adnotacje w dymkach.

Przykład: ten fragment kodu definiuje czarną, 12-pikselową etykietę tekstową z tekstem pobranym z kolumny 0 i przypisanym do punktu danych w kolumnie 2 tego samego wiersza: options['annotationColumns'] = [{column: 2, positionColumn: 0, color: '#000000', size: '12', priority: 'high', type: 'text'}];
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.
fill boolean false Jeśli ma wartość true (prawda), wypełnia obszar pod każdym wierszem. Dostępne tylko w przypadku wykresów liniowych.
firstHiddenColumn Liczba brak

Indeks kolumny danych. Ta kolumna, jak również wszystkie kolejne kolumny, nie będzie używana do rysowania głównych elementów serii wykresów (takich jak linie na wykresie liniowym czy słupki na wykresie słupkowym), ale będzie używana jako dane dla znaczników i innych adnotacji. Pamiętaj, że kolumny z ciągami znaków są uwzględnione w tej liczbie indeksu.
wysokość Liczba 200 Wysokość wykresu w pikselach. Jeśli jej nie ma lub nie mieści się w dopuszczalnym zakresie, używana jest wysokość elementu zawierającego jej element. Jeśli wykracza ona też poza dopuszczalny zakres, zostanie użyta wysokość domyślna.
etykiety string, „none” (brak)

[Tylko wykres kołowy] Jaka etykieta ma być wyświetlana w przypadku każdego wycinka. Wybierz jedną z tych wartości:

  • „brak” – brak etykiet.
  • „value” – wyświetla wartość wycinka w formie etykiety.
  • „nazwa” – nazwa wycinka (nazwa kolumny) jako etykieta.
legenda string, „prawo” Gdzie jest wyświetlana legenda wykresu (w odniesieniu do wykresu). Podaj jedną z tych wartości: „top”, „bottom”, „left”, „right”, „none”. Ignorowany na wykresach, które nie zawierają legendy (np. na wykresach mapy).
maksimum Liczba Maksymalna wartość danych Maksymalna wartość wyświetlana na skali. Ignorowana w przypadku wykresów kołowych. Wartość domyślna to maksymalna wartość danych, z wyjątkiem wykresów słupkowych, gdzie wartością domyślną jest maksymalna wartość danych. Jest ona ignorowana w przypadku wykresów słupkowych, gdy tabela ma więcej niż 1 kolumnę danych.
min Liczba Minimalna wartość danych Minimalna wartość wyświetlana na skali. Ignorowana w przypadku wykresów kołowych. Wartość domyślna to minimalna wartość danych. Wyjątkiem są wykresy słupkowe, gdzie wartość domyślna to 0. Jest ona ignorowana w przypadku wykresów słupkowych, gdy tabela ma więcej niż 1 kolumnę danych.
showCategoryLabels boolean prawda Określa, czy etykiety mają być wyświetlane na osi kategorii (np. wiersza). Dostępne tylko w przypadku wykresów liniowych i słupkowych.
showValueLabels boolean prawda Wartość Prawda wyświetla etykietę na osi wartości. Dostępne tylko w przypadku wykresów liniowych i słupkowych.
singleColumnDisplay Liczba brak Renderuje tylko określoną kolumnę danych. Jej indeks w tabeli jest liczony od zera, gdzie 0 oznacza pierwszą kolumnę danych. Kolor przypisany do pojedynczej kolumny jest taki sam jak podczas renderowania wszystkich kolumn. Nie można używać z wykresami kołowymi i mapowymi.
tytuł string, Pusty ciąg Tytuł wykresu. Jeśli nie podasz tytułu, nie będzie wyświetlany. Odpowiedni parametr wykresu to chtt.
valueLabelsInterval Liczba Automatycznie Interwał, po którym mają być wyświetlane etykiety osi wartości. Jeśli np. min to 0, max to 100, a valueLabelsInterval to 20, na wykresie będą widoczne etykiety osi (0, 20, 40, 60, 80 100).
szerokość Liczba 400 Szerokość wykresu w pikselach. Jeśli jej nie ma lub nie mieści się w dopuszczalnym zakresie, używana jest szerokość elementu zawierającego. Jeśli wykracza ona też poza dopuszczalny zakres, zostanie użyta szerokość domyślna.

Metody

Metoda Typ zwracanej wartości Opis
draw(data, options) Brak Rysuje mapę.
getImageUrl() Ciąg znaków Zwraca adres URL interfejsu Google Chart API używany do żądania wykresu. Pamiętaj,że może on mieć ponad 2000 znaków. Więcej informacji znajdziesz w interfejsie Google Chart API.

Zdarzenia

Jeśli ustawisz właściwość enableEvents na wartość „true”, wykresy obsługujące będą generować zdarzenia dla zdarzeń użytkownika wymienionych w tabeli poniżej. Wszystkie te zdarzenia zwracają obiekt event z tymi właściwościami:

  • type – ciąg tekstowy wskazujący typ zdarzenia.
  • region – identyfikator regionu, którego dotyczy problem. Aby wyświetlić listę dostępnych nazw, dodaj parametr chof=json do typu wykresu nieprzetworzonego. Więcej informacji znajdziesz w sekcji chof=json.
Nazwa Opis Typ Wartość
error Uruchamiane, gdy podczas próby wyrenderowania wykresu wystąpi błąd. identyfikator, wiadomość
onmouseover Uruchamiane, gdy użytkownik najedzie kursorem na element wykresu. „mouseover”
onmouseout Uruchamiane, gdy użytkownik najedzie kursorem poza element wykresu. „mouseout”
onclick Uruchamiane, gdy użytkownik kliknie element wykresu.

„kliknij”

Które wykresy obsługują zdarzenia?

Wszystkie wykresy, które obsługują parametr chof=json, obsługują zdarzenia (czyli wszystkie wykresy z wyjątkiem wykresów specjalnych, np. z kodami QR).

Przykład obsługi zdarzeń

Oto przykład paska rejestrującego kliknięcia myszą.

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;  charset=utf-8"/>
    <title>
       Google Image Events Sample
    </title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['imagechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht:  'bvs', chs: '300x125',  colors:['#4D89F9','#C6D9FD'],
                       chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};

        var chart = new  google.visualization.ImageChart(document.getElementById('visualization'));
        chart.draw(dataTable, options);

        // Assign  event  handler
        google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
      }

      google.charts.setOnLoadCallback(drawVisualization);

      // Define an event handler
      function mouseEventHandler(event)  {
        document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
      }

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 300px;"></div>
    <div id="debugger"></div>
  </body>
</html>

Zasady dotyczące danych

Dane są wysyłane do usługi Google Chart API.

Lokalizacja

Ta wizualizacja obsługuje każdą lokalizację obsługiwaną przez usługę wykresów Google.