Wizualizacja: wykres słupkowy (starsza wersja)

Wycofano

Ta wizualizacja została zastąpiona nową wersją. Użyj jej. Aby przeprowadzić migrację, odwiedź stronę Informacje o wersji.

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

Omówienie

Poziomy wykres słupkowy renderowany w przeglądarce za pomocą SVG lub VML. Wyświetlaj wskazówki po kliknięciu punktów. Animacja linii podczas klikania wpisów legendy. Pionową wersję tego wykresu znajdziesz w tabeli kolumn.

Autor: Google

Przykład

Samodzielnie koduj w sekcji Wizualizacja

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["barchart"]});
      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.BarChart(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 "barchart" 

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

Nazwa klasy wizualizacji to google.visualization.BarChart 

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

Format danych

Każdy wiersz tabeli odpowiada grupie przyległych pasków.

Pierwsza kolumna w tabeli powinna być ciągiem znaków i reprezentuje etykietę tej grupy słupków. Dalej można umieścić dowolną liczbę kolumn (wszystkie mają wartości liczbowe), z których każda 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ślna Opis
Kolor osi ciąg znaków lub obiekt kolor domyślny Kolor osi. Możliwe wartości to opcje konfiguracji backgroundColor.
Kolor tła osi ciąg znaków lub obiekt kolor domyślny Obramowanie tła osi. Możliwe wartości to opcje konfiguracji backgroundColor.
FontFontSize liczba automatycznie Rozmiar czcionki tekstu osi wykresu (w pikselach).
colorColor ciąg znaków lub obiekt kolor domyślny Kolor tła głównego obszaru wykresu. Możesz wybrać jedną z tych opcji:
  • Ciąg z kolorem obsługiwany przez kod HTML, np. „czerwony” lub „#00cc00”.
  • Obiekt z właściwościami stroke fill i strokeSize. stroke i fill powinny być ciągiem znaków w kolorze. StylSize to liczba. na przykład: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}. Aby wypełniać tylko bez kreski, użyj stroke:null, strokeSize: 0.
kolor obramowania ciąg znaków lub obiekt kolor domyślny Obramowanie elementów wykresu. Możliwe wartości to opcje konfiguracji backgroundColor.
kolory Tablica ciągów znakó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 w formacie HTML. Przykład: kolory:['#00FF00','orange']
  • Jeśli jest to is3D=true, jest to tablica w kolorach HTML lub obiektach 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 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'}]}
Włącz wartość logiczna prawda Jeśli ma wartość Prawda, etykietki są wyświetlane, gdy użytkownik kliknie pasek.
kolor obramowania zaznaczenia ciąg znaków lub obiekt kolor domyślny Obramowanie wokół zaznaczonych elementów wykresu (wskazane za pomocą myszy). Możliwe wartości to opcje konfiguracji backgroundColor.
wysokość liczba Wysokość kontenera Wysokość wykresu w pikselach.
is3D wartość logiczna fałsz Jeśli ma wartość Prawda, wyświetla trójwymiarową zmianę.
Jest skumulowany wartość logiczna fałsz Jeśli ma wartość Prawda, wartości wierszy są skumulowane (skumulowane).
legenda tekst „w prawo” Pozycja i typ legendy. Dostępne wartości:
  • „right” (po prawej) – po prawej stronie wykresu.
  • „left” – po lewej stronie wykresu.
  • „top” – powyżej wykresu.
  • „bottom” – pod wykresem.
  • „none” – nie wyświetla się żadna legenda.
legendbackgroundColor ciąg znaków lub obiekt kolor domyślny Kolor tła obszaru legendy na wykresie. Możliwe wartości to opcje konfiguracji backgroundColor.
legendFontSize liczba automatycznie Rozmiar czcionki legendy w pikselach.
legendTextColor ciąg znaków lub obiekt kolor domyślny Kolor tekstu legendy. Możliwe wartości to opcje konfiguracji backgroundColor.
logScale wartość logiczna fałsz Jeśli ma wartość true (prawda), oś główna powinna być przeskalowana logarytmicznie.
maks. liczba automatycznie Określa najwyższą linię siatki osi Y. Rzeczywista linia siatki będzie większa od dwóch wartości: maksymalnej opcji lub najwyższej wartości danych, zaokrąglona do kolejnego wyższego znaku siatki.
minuta liczba automatycznie Określa najniższą linię siatki osi Y. Rzeczywista linia siatki będzie dolną 2 wartościami: minimalną lub najniższą wartością danych, zaokrągloną w dół do następnego niższego znaku siatki.
odwrotna oś wartość logiczna prawda Jeśli zasada ma wartość Prawda (ustawienie domyślne), kategorie są wyświetlane z góry. Jeśli ma wartość Fałsz, paski są rysowane od dołu do góry.
Pokaż kategorie wartość logiczna prawda Jeśli ma wartość true (prawda), etykiety kategorii są wyświetlane. Jeśli ma wartość false (fałsz), nie.
tytuł tekst brak tytułu Tekst do wyświetlenia nad wykresem.
tytuł X tekst brak tytułu Tekst do wyświetlenia pod osią poziomą.
tytułY tekst brak tytułu Tekst do wyświetlenia na osi pionowej.
kolorKoloru ciąg znaków lub obiekt kolor domyślny Kolor tytułu wykresu. Możliwe wartości to opcje konfiguracji backgroundColor.
titleFontSize liczba automatycznie Rozmiar czcionki tytułu wykresu podany w pikselach.

tooltipFontSize		 liczba 11 Rozmiar czcionki tekstu podpowiedzi. Ta właściwość może zostać zmniejszona, jeśli etykietka jest zbyt mała, aby mieścić się w danej czcionce.
wysokość etykietki
 liczba 60 Wysokość etykietki w pikselach. Wysokość etykietki jest stała. Nigdy nie powiększa się ani nie zmniejsza, aby dopasować się do długości lub rozmiaru czcionki tekstu. Jednak co najmniej 1/3 wysokości wykresu zostanie przycięta.
Szerokość etykiety liczba 120 Szerokość etykietki w pikselach. Szerokość etykietki jest stała. Nigdy nie powiększa się ani nie zmniejsza, aby dopasować się do długości lub rozmiaru czcionki tekstu. Jednak wszystkie elementy przekraczające 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 wyboru Standardowa implementacja getSelection(). Wybrane elementy to elementy kolumn i komórek. Użytkownik może wybrać tylko jedną kolumnę lub komórkę naraz.
setSelection() brak Standardowa implementacja setSelection(), ale obsługuje tylko 1 element. Traktuje wszystkie zaznaczone elementy jako kolumnę lub zaznaczenie komórki. Pamiętaj, że nie można wybrać kolumny etykiety.

Zdarzenia

Nazwa Opis Usługi
onmouseover Uruchamiane, gdy użytkownik najedzie kursorem na słupek i przechodzi w indeksie wiersza i kolumny odpowiedniej komórki. wiersz, kolumna
onmouseout Uruchamiane, gdy użytkownik odsunie kursor od paska i przejdzie w indeksie wiersza i kolumny odpowiedniej komórki. wiersz, kolumna
ready Wykres jest gotowy do wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywoływania po jego narysowaniu, skonfiguruj odbiornik dla tego zdarzenia przed wywołaniem metody draw i wywołaj je dopiero po wywołaniu zdarzenia Brak
select Uruchamiane, gdy użytkownik kliknie pasek lub legendę. Jeśli zaznaczysz pasek, zostanie wybrana odpowiednia komórka w tabeli danych. Po wybraniu legendy wybrana zostanie też odpowiednia kolumna 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 do żadnego serwera.