Wizualizacja: ogólny wykres graficzny

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

  1. Przegląd
  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 towarzyszący wszystkich wykresów generowanych przez Google Chart API. Zanim spróbujesz użyć tej wizualizacji, zapoznaj się z dokumentacją interfejsu Chart API. W ramach tej wizualizacji możesz wysłać maksymalnie 16 tys. danych, w przeciwieństwie do limitu 2 tys. bezpośrednich wywołań 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 inne 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 opakowanych wykresach słupkowych nie trzeba określać parametru chxt='x' tak, jakby to było w przypadku samodzielnego wywoływania wykresu. Jeśli nie podasz osi, W ogólnym wykresie graficznym nastąpi domyślne skonfigurowanie wykresu.

<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 „imagegraph”.

  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 map i jeden dla pozostałych. Jedynym formatem liczbowym obsługiwanym przez dane jest typ numeru JavaScript.

Uwaga: nie koduj żadnych wartości ciągu znaków przekazywanych jako dane lub opcje.

Wykresy map

Wykres mapy pobiera tabelę danych z 2 wymaganymi kolumnami:

Więcej informacji znajdziesz w dokumentacji wykresu mapy.

Wykresy inne niż mapy

Wykresy inne niż mapowe korzystają z tabeli danych z 2 opcjonalnymi kolumnami (na początku i na końcu) oraz co najmniej 1 kolumną z danymi:

  • Pierwsza kolumna – [opcjonalny ciąg znaków] reprezentuje etykietę na osi X (odpowiada parametrowi chl lub chxl) wykresów, które obsługują ten wykres.
  • Następne kolumny – dowolna liczba kolumn liczbowych, z których każda reprezentuje serię danych.
  • Ostatnie kolumny – [opcjonalne, ciąg] Dowolna liczba kolumn z ciągami za kolumnami danych, przy czym każdy wpis reprezentuje etykietę punktu danych dla wykresów, które go obsługują. Jeśli chcesz używać tej kolumny, musisz określić opcję annotationColumns.

Dane będą wyświetlane w różny sposób, w zależności od typu wykresu. Zapoznaj się z dokumentacją wykresu.

Uwaga na temat indeksów kolumn: przed wysłaniem tabeli do usługi Chart API wizualizacja wykresu obrazu standardowego usuwa kolumny ciągu znaków z tabeli danych. Oznacza to, że indeksy kolumn dostępne w opcjach, metodach i zdarzeniach zdefiniowane na tej stronie obejmują kolumny z numerami indeksów. Indeksy kolumn w dowolnych opcjach obsługiwanych przez usługę Chart API (np. opcja chm) ignorują kolumny ciągu w liczbie indeksów.

Opcje konfiguracji

Dla tej wizualizacji są zdefiniowane poniższe opcje. Zdefiniuj je w obiekcie opcji przekazywanym w metodzie draw() wizualizacji. Nie wszystkie wymienione niżej typy są obsługiwane. Zapoznaj się z dokumentacją statycznego typu wykresu. Jako parametr możesz przekazać dowolny parametr adresu URL Chart API. Na przykład parametr adresu URL chg=50,50 z wizualizacji wykresu został 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 koloru interfejsu Chart API. Format jest podobny do formatu #RRGGBB, ale zawiera opcjonalną wartość szesnastkową, która wskazuje przezroczystość. Kolory czytelne dla człowieka, takie jak „czerwony”, „zielony”, „niebieski” nie są obsługiwane. Format koloru interfejsu Chart API nie zawiera początkowego symbolu #, ale ogólne opcje wizualizacji wykresów obrazu akceptują kody kolorów z znakiem # lub bez niego.

Nazwa Typ Domyślna Opis
Kolumny adnotacji Tablica<object> brak

Etykiety punktów danych do różnych typów wykresów. Jest to tablica obiektów, z których każdy używa sformatowanej etykiety do jednego punktu danych na wykresie. Ta opcja jest dostępna tylko w przypadku wykresów, które obsługują punkty danych (więcej informacji znajdziesz w połączonym temacie), a tabela danych musi zawierać co najmniej 1 kolumnę z etykietami etykiet.

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

  • column [liczba] – indeks oparty na 0 kolumny, w której znajduje się tekst użyty w adnotacji. Nie potrzebujesz wartości w każdym wierszu tej kolumny.
  • positionColumn [liczba] – oparty na zerowym indeksie kolumny, w której znajduje się oznaczony punkt danych. Wartością domyślną jest pierwsza kolumna danych.
  • color [ciąg znaków] – kolor tekstu adnotacji w formacie koloru interfejsu API wykresu. Domyślne ustawienie to „#000000” (czarne).
  • size [liczba] – rozmiar czcionki adnotacji (w pikselach).
  • priority [ciąg znaków] – „niski”, „średni” lub „wysoki”, określający warstwę, na którą powinna zostać pobrana etykieta. Wartość domyślna to „medium”, która określa, że etykieta jest rysowana za słupkami i liniami, ale przed innymi etykietami.
  • type [ciąg znaków] – „text” lub „flag”. „text” tworzy adnotację w postaci zwykłego tekstu, a „flag” tworzy adnotację z dymkiem.

Przykład: ten fragment kodu zawiera czarną, 12-pikselową etykietę tekstową, z tekstem wpisanym w kolumnie 0 i przypisanym do punktu danych w kolumnie 2 w tym samym wierszu: options['annotationColumns'] = [{column: 2, positionColumn: 0, color: '#000000', size: '12', priority: 'high', type: 'text'}];
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.
fill wartość logiczna fałsz Jeśli ma wartość true (prawda), wypełni obszar pod każdą linią. Dostępne tylko w przypadku wykresów liniowych.
pierwsza ukryta kolumna liczba brak

Indeks kolumny danych. Kolumna podana wraz z wszystkimi kolejnymi kolumnami nie będzie używana do rysowania głównych elementów serii (np. linii na wykresie liniowym czy słupkowych), ale będzie służyć jako dane dla znaczników i innych adnotacji. Pamiętaj, że ta liczba indeksów obejmuje kolumny z ciągami znaków.
wysokość liczba 200 Wysokość wykresu w pikselach. Jeśli nie ma go lub nie ma w akceptowanym zakresie, stosowana jest wysokość elementu, który go zawiera. Jeśli będzie się też przekracza akceptowalny zakres, zostanie użyta wysokość domyślna.
etykiety tekst „brak”

[Tylko wykres kołowy] Etykieta (jeśli jest widoczna) dla każdego wycinka. Wybierz jedną z tych wartości:

  • „none” – brak etykiet.
  • „value” – pokazuje wartość wycinka jako etykietę.
  • „name” – pokaż nazwę wycinka (nazwę kolumny) jako etykietę.
legenda tekst „w prawo” Gdzie wyświetlić legendę wykresu względem wykresu? Określ jedną z tych wartości: „top”, „bottom”, „left”, „right” lub „none”. Ignorowane na wykresach bez legend (np. na mapach).
maks. liczba Maksymalna wartość danych Maksymalna wartość wyświetlana na wadze. Ignorowany w przypadku wykresów kołowych. Wartość domyślna to maksymalna wartość danych z wyjątkiem wykresów słupkowych, gdzie domyślna wartość to maksymalna wartość danych. Jest ona ignorowana w przypadku wykresów słupkowych, gdy tabela ma więcej niż 1 kolumnę danych.
minuta liczba Wartość danych mimimu Minimalna wartość wyświetlana na wadze. Ignorowany w przypadku wykresów kołowych. Domyślna wartość to minimalna wartość danych z wyjątkiem wykresów słupkowych, gdzie wartością domyślną jest 0. Jest ona ignorowana w przypadku wykresów słupkowych, gdy tabela ma więcej niż 1 kolumnę danych.
Etykieta programu wartość logiczna prawda Określa, czy etykiety powinny być wyświetlane na osi kategorii (tzn. w wierszu). Dostępne tylko w przypadku wykresów liniowych i słupkowych.
Etykiety programu ShowValue wartość logiczna prawda Wartość prawda powoduje wyświetlanie etykiety na osi wartości. Dostępne tylko w przypadku wykresów liniowych i słupkowych.
pojedynczakolumna liczba brak Renderuje tylko określoną kolumnę danych. Ta liczba to indeks oparty na zerowej wartości w tabeli, gdzie zero to pierwsza kolumna danych. Kolor przypisany do jednej kolumny jest taki sam jak podczas renderowania wszystkich kolumn. Nie można używać z wykresami kołowymi i mapowymi.
tytuł tekst Pusty ciąg Tytuł wykresu. Jeśli nie określisz tytułu, tytuł nie będzie wyświetlany. Odpowiednik parametru wykresu to chtt.
ValueLabelsInterval liczba Automatycznie Odstęp czasowy między etykietami osi wartości. Jeśli na przykład min to 0, max to 100, a valueLabelsInterval to 20, na wykresie pojawią się etykiety osi (0, 20, 40, 60, 80 100).
szerokość liczba 400 Szerokość wykresu w pikselach. Jeśli nie ma go lub nie ma w akceptowanym zakresie, używana jest szerokość zawartego elementu. Jeśli będzie się też przekracza akceptowany 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 zawierać więcej niż 2000 znaków. Więcej informacji znajdziesz na stronie o interfejsie Google Chart API.

Zdarzenia

Jeśli ustawisz właściwość enableEvents na wartość „true”, obsługa wykresów zwróci zdarzenia użytkownika wymienione w tabeli poniżej. Wszystkie te zdarzenia zwracają obiekt event z tymi właściwościami:

  • type – ciąg znaków reprezentujący typ zdarzenia.
  • region – identyfikator regionu, którego dotyczy problem; Aby zobaczyć listę dostępnych nazw, dodaj typ nieprzetworzonego parametru chof=json. Więcej informacji: chof=json.
Nazwa Opis Typ wartości
error Uruchamiane, gdy podczas próby renderowania wykresu wystąpi błąd. id, message,
onmouseover Uruchamiane, gdy użytkownik najedzie kursorem na element wykresu. „mouseover”
onmouseout Uruchamiane, gdy użytkownik odsunie kursor od elementu 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 przesyłania (czyli wszystkie wykresy oprócz specjalnych, np. kodów QR).

Przykład obsługi zdarzenia

Oto przykład paska z kliknięciami myszy.

<!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 wszystkie lokalizacje obsługiwane przez usługę Wykres Google.