Wizualizacja: wykres kolumnowy (stara wersja)

Wycofano

Ta wizualizacja została zastąpiona nową wersją – korzystaj z niej. Aby ułatwić sobie migrację, zapoznaj się z informacjami o wersji.

  1. Overview
  2. Przykład
  3. Wczytuję
  4. Format danych
  5. Opcje konfiguracji
  6. Metody
  7. Zdarzenia
  8. Zasady dotyczące danych

Omówienie

Pionowy wykres słupkowy renderowany w przeglądarce za pomocą SVG lub VML. Wyświetla wskazówki po kliknięciu punktów. Powoduje animowanie linii po kliknięciu wpisów w legendzie. Poziomą wersję tego wykresu znajdziesz na wykresie słupkowym.

Autor: Google

Przykład

Zakoduj go samodzielnie w narzędziu do wizualizacji treści

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["columnchart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

Wczytuję

Nazwa pakietu google.load to "columnchart" 

  google.load("visualization", "1", {packages: ["columnchart"]});

Nazwa klasy wizualizacji to google.visualization.ColumnChart 

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

Format danych

Każdy wiersz w tabeli odpowiada grupie sąsiednich słupków.

Pierwsza kolumna w tabeli powinna być ciągiem znaków i reprezentuje etykietę tej grupy słupków. Po niej może znajdować się dowolna liczba kolumn (wszystkie mają wartości liczbowe), a każda z nich reprezentuje słupki o tym samym kolorze i względnej pozycji w każdej grupie.

Wartość w danym wierszu i kolumnie określa wysokość pojedynczego słupka reprezentowanego przez ten wiersz i kolumnę.

Opcje konfiguracji

Nazwa Typ Domyślne Opis
axisColor string lub Object kolor domyślny Kolor osi. Możliwe wartości są takie same jak wartości opcji konfiguracji backgroundColor.
axisBackgroundColor string lub Object kolor domyślny Obramowanie wokół osi tła. Możliwe wartości są takie same jak wartości opcji konfiguracji backgroundColor.
axisFontSize Liczba automatyczna Rozmiar czcionki tekstu osi wykresu w pikselach.
backgroundColor string lub Object kolor domyślny Kolor tła głównego obszaru wykresu. Dostępne opcje:
  • Ciąg znaków z kolorem obsługiwanym przez kod HTML, na przykład „czerwony” lub „#00cc00”
  • Obiekt z właściwościami stroke fill i strokeSize. stroke i fill powinny być ciągiem znaków i zawierać kolor, a wartość styleSize to liczba. Na przykład: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}. Aby użyć tylko wypełnienia, bez kreski, użyj stroke:null, strokeSize: 0.
borderColor string lub Object kolor domyślny Obramowanie elementów wykresu. Możliwe wartości są takie same jak wartości opcji konfiguracji backgroundColor.
kolory Tablica ciągów lub obiektów Kolory domyślne

Tablica kolorów, w której każdy element określa kolor jednej serii. Należy określić jeden element tablicy dla każdej serii.

  • Jeśli is3D=false, jest to tablica kolorów HTML. Przykład: kolory:['#00FF00','pomarańczowy']
  • W przypadku wartości is3D=true jest to tablica kolorów HTML lub obiektów tego typu: {color:face_color, darker:shade_color}, gdzie color to kolor twarzy elementu, a darker to kolor odcienia. Jeśli jednak określisz kolor HTML dla obiektu 3D, twarz i odcień będą miały ten sam kolor, a efekt 3D zostanie zmniejszony. Przykład: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
enableTooltip boolean prawda Jeśli ma wartość Prawda, etykietki wyświetlają się, gdy użytkownik kliknie kolumnę.
focusBorderColor string lub Object kolor domyślny Obramowanie wokół elementów wykresu, które są zaznaczone (wskazane za pomocą myszy). Możliwe wartości są takie same jak wartości opcji konfiguracji backgroundColor.
wysokość Liczba Wysokość kontenera Wysokość wykresu w pikselach.
is3D boolean false Jeśli ma wartość Prawda, wyświetla zmianę trójwymiarową.
isStacked boolean false Jeśli ma wartość Prawda, wartości wierszy są skumulowane (skumulowane).
legenda string, „prawo” Położenie i typ legendy. Dostępne wartości:
  • „w prawo” – z prawej strony wykresu.
  • „left” – po lewej stronie wykresu.
  • „góra” – nad wykresem.
  • „bottom” – pod wykresem.
  • „brak” – nie jest wyświetlana żadna legenda.
legendBackgroundColor string lub Object kolor domyślny Kolor tła obszaru legendy wykresu. Możliwe wartości są takie same jak wartości opcji konfiguracji backgroundColor.
legendFontSize Liczba automatyczna Rozmiar czcionki legendy w pikselach.
legendTextColor string lub Object kolor domyślny Kolor wpisów tekstowych w legendzie. Możliwe wartości są takie same jak wartości opcji konfiguracji backgroundColor.
logScale boolean false Jeśli ma wartość prawda, oś główna powinna być skalowana logarytmicznie.
maksimum Liczba automatyczna Określa najwyższą linię siatki na osi Y. Rzeczywista linia siatki będzie mieć większą z 2 wartości: maksymalną wartość opcji lub najwyższą wartość danych, zaokrągloną w górę do następnego znacznika siatki.
min Liczba automatyczna Określa najniższą linię siatki na osi Y. Rzeczywista linia siatki będzie przedstawiana najniższą z 2 wartości: minimalną lub najniższą wartością danych, zaokrągloną w dół do następnego dolnego znacznika siatki .
reverseAxis boolean false Jeśli zasada ma wartość Prawda, kategorie są rysowane od prawej do lewej. Domyślnie rysowanie od lewej do prawej.
showCategories boolean prawda Jeśli ma wartość true (prawda), etykiety kategorii są wyświetlane. Jeśli ma wartość false (fałsz), nie będzie.
tytuł string, bez tytułu Tekst do wyświetlenia nad wykresem.
titleX string, bez tytułu Tekst wyświetlany pod osią poziomą.
titleY string, bez tytułu Tekst wyświetlany na osi pionowej.
titleColor string lub Object kolor domyślny Kolor tytułu wykresu. Możliwe wartości są takie same jak wartości opcji konfiguracji backgroundColor.
titleFontSize Liczba automatyczna Rozmiar czcionki tytułu wykresu w pikselach.

tooltipFontSize		 Liczba 11 Rozmiar czcionki tekstu etykietki. Wartość ta może się zmniejszyć, jeśli etykietka jest zbyt mała, by pomieścić tekst z określoną czcionką.
tooltipHeight
 Liczba 60 Wysokość etykietki w pikselach. Wysokość etykietki jest stała – nigdy nie będzie powiększana ani pomniejszana, by dopasować się do długości lub czcionki tekstu. Wszystkie elementy większe niż 1/3 wysokości wykresu zostaną przycięte.
tooltipWidth Liczba 120 Szerokość etykietki w pikselach. Szerokość etykietki jest stała – nigdy nie powiększa się ani nie zmniejsza w celu dopasowania do długości lub czcionki tekstu. Wszystkie elementy większe niż szerokość wykresu zostaną przycięte.
szerokość Liczba Szerokość kontenera Szerokość wykresu w pikselach.

Metody

Metoda Typ zwracanej wartości Opis
draw(data, options) brak Rysuje wykres.
getSelection() Tablica elementów zaznaczenia Standardowa implementacja getSelection(). Wybrane elementy to kolumny i komórki. Użytkownik może wybrać tylko jedną kolumnę lub komórkę naraz.
setSelection() brak Standardowa implementacja setSelection(), ale obsługuje wybór tylko 1 elementu. Traktuje każdy wpis zaznaczonego jako kolumnę lub komórkę. Pamiętaj, że nie możesz wybrać kolumny etykiet.

Zdarzenia

Nazwa Opis Właściwości
onmouseover Uruchamiane, gdy użytkownik najedzie kursorem na słupek i przekaże indeksy wierszy i kolumn odpowiedniej komórki. wiersz, kolumna
onmouseout Uruchamiane, gdy użytkownik najedzie kursorem poza słupek i przejdzie do indeksów wierszy i kolumn odpowiedniej komórki. wiersz, kolumna
ready Wykres jest gotowy do obsługi wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywołań po jego narysowaniu, skonfiguruj detektor tego zdarzenia przed wywołaniem metody draw i wywołuj je dopiero po wywołaniu zdarzenia Brak
select Uruchamiane, gdy użytkownik kliknie pasek lub legendę. Zaznaczenie słupka powoduje zaznaczenie odpowiedniej komórki w tabeli danych. Zaznaczenie legendy powoduje zaznaczenie odpowiedniej kolumny w tabeli danych. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer getSelection(). Brak

Zasady dotyczące danych

Cały kod i dane są przetwarzane i renderowane w przeglądarce. Żadne dane nie są wysyłane na żaden serwer.