Wykresy słupkowe

Omówienie

Wykresy słupkowe Google są renderowane w przeglądarce za pomocą SVG lub VML, zależnie od tego, co jest odpowiednie dla przeglądarki użytkownika. Podobnie jak w przypadku wszystkich wykresów Google, po najechaniu przez użytkownika na dane na wykresie słupkowym wyświetlane są podpowiedzi. Pionową wersję tego wykresu znajdziesz w wykresie kolumny.

Przykłady

Kolorowe paski

Wykresy gęstości 4 metali szlachetnych:

Wszystkie pozostałe kolory są domyślnie niebieskie. To wszystko dlatego, że wszystkie są częścią tej samej serii. Gdyby była druga seria, zostałaby pokolorowana na czerwono. Te kolory możemy dostosować za pomocą roli stylu:

Kolory można wybrać na 3 różne sposoby, a w tabeli danych znajdują się wszystkie: wartości RGB, angielskie nazwy kolorów i deklaracja podobna do CSS:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],
         ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

Style słupków

Rola stylu pozwala kontrolować kilka aspektów wyglądu paska za pomocą deklaracji podobnych do CSS:

  • color
  • opacity
  • fill-color
  • fill-opacity
  • stroke-color
  • stroke-opacity
  • stroke-width

Nie zalecamy mieszania stylów zbyt głęboko w wykresie – wybierz styl i trzymaj się go. Jednak aby zademonstrować wszystkie atrybuty stylu, możesz skorzystać z tego przykładu:

Pierwsze dwa takty mają konkretne color (pierwszy z nazwą w języku angielskim, drugi z wartością RGB). Nie wybrano opacity, więc stosowana jest wartość domyślna 1,0 (w pełni nieprzejrzysty), dlatego drugi pasek zasłania siatkę. W trzecim pasku używana jest wartość opacity, 0,2, przez co widoczna jest siatka. W czwartym takcie zastosowano 3 atrybuty stylu: stroke-color i stroke-width, aby narysować obramowanie, oraz parametr fill-color, aby określić kolor prostokąta wewnątrz. Poza tym pasek po prawej stronie dodatkowo korzysta z stroke-opacity i fill-opacity, by wybrać przezroczystość obramowania i wypełnienia:

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Paski do etykiet

Wykresy zawierają kilka rodzajów etykiet, np. etykiety potwierdzenia, etykiety legend i etykiety w etykietkach. W tej sekcji zobaczysz, jak umieścić etykiety wewnątrz (lub w pobliżu) słupków na wykresie słupkowym.

Załóżmy, że chcemy dodać adnotacje do każdego słupka z odpowiednim symbolem chemicznym. W tym celu możesz użyć roli adnotacji:

W tabeli danych definiujemy nową kolumnę z atrybutem { role: 'annotation' }, która zawiera nasze etykiety słupkowe:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Użytkownicy mogą najeżdżać kursorem na słupki, aby wyświetlać wartości danych, ale możesz też uwzględniać je na słupkach:

Jest to nieco bardziej skomplikowane, ponieważ tworzymy właściwość DataView, która określa adnotację dla każdego słupka.

  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>

Jeśli chcemy sformatować wartość inaczej, możesz zdefiniować formater i skompresować go w ten sposób: 

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

Następnie możemy nazwać ją calc: getValueAt.bind(undefined, 1).

Jeśli etykieta jest zbyt duża, aby zmieścić się w całości na pasku, jest wyświetlana na zewnątrz:

Skumulowany wykres słupkowy

skumulowany wykres słupkowy, który umieszcza obok siebie powiązane wartości. Jeśli istnieją wartości ujemne, są one ułożone w odwrotnej kolejności pod osią wykresu. Skumulowane wykresy słupkowe są zwykle używane, gdy kategoria naturalnie dzieli się na komponenty. Weźmy na przykład hipotetyczną sprzedaż książek podzieloną według gatunku i porównaną z czasem:

Skumulowany wykres słupkowy możesz utworzyć, ustawiając opcję isStacked na true:

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

Skumulowane wykresy słupkowe obsługują również skumulowane 100%, gdzie stosy elementów w każdej wartości domeny są przeskalowane, aby sumować je do 100%. Dostępne opcje to isStacked: 'percent', który formatuje każdą wartość jako procent 100%, oraz isStacked: 'relative', który formatuje ułamek 1. Dostępna jest też opcja isStacked: 'absolute', która odpowiada funkcjonalnie funkcji isStacked: true.

Zwróć uwagę, że na wykresie skumulowanym 100% po prawej wartości sygnatury są oparte na względnej skali od 0 do 1 jako ułamki 1, ale wartości osi są wyświetlane jako wartości procentowe. Dzieje się tak, ponieważ znaczniki osi procentowej są wynikiem zastosowania formatu „#,##%” do względnych wartości skali od 0 do 1. Jeśli używasz isStacked: 'percent', pamiętaj, aby zaznaczyć odpowiednie znaczniki przy względnej skali 0–1.

Skumulowany
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
Skumulowany 100%
        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };

Tworzenie wykresów słupkowych dla materiałów

W 2014 roku ogłosiliśmy wytyczne dotyczące wspólnego wyglądu i stylu obsługi wszystkich naszych usług i aplikacji (np. aplikacji na Androida), które działają na platformach Google. Nazywamy to Material Design. Będziemy udostępniać wersje „Material” wszystkich najważniejszych wykresów. Możesz ich używać, jeśli podoba Ci się.

Tworzenie wykresu słupkowego przypomina tworzenie klasycznego wykresu słupkowego. Wczytujesz interfejs Google Migration API (chociaż korzystasz z pakietu 'bar' zamiast pakietu 'corechart'), definiujesz tabelę danych, a następnie tworzysz obiekt (ale klasę google.charts.Bar zamiast google.visualization.BarChart).

Uwaga: Wykresy materiałowe nie działają w starszych wersjach Internet Explorera. (IE8 i starsze wersje nie obsługują SVG, co jest wymagane na wykresach materiałowych).

W porównaniu z klasycznymi wykresami słupkowymi wprowadzono istotne zmiany w wykresach materiałowych. Są to m.in. udoskonalona paleta kolorów, zaokrąglone narożniki, wyraźniejsze formatowanie etykiet, węższe odstępy między seriami, miększe linie i tytuły (oraz dodatkowe napisy).

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          bars: 'horizontal' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

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

Wykresy materiałowe są w wersji beta. Wygląd i opcje interakcji są w większości ostateczne, ale wiele opcji dostępnych na wykresach klasycznych nie jest jeszcze w nich dostępnych. Listę opcji, które nie są jeszcze obsługiwane, znajdziesz w tym artykule.

Ponadto deklarowane opcje nie zostały sfinalizowane, jeśli więc korzystasz z opcji klasycznych, musisz je przekonwertować na opcje materiałowe, zastępując ten wiersz:

chart.draw(data, options);

...na przykład:

chart.draw(data, google.charts.Bar.convertOptions(options));

Używanie google.charts.Bar.convertOptions() pozwala korzystać z niektórych funkcji, takich jak gotowe ustawienia hAxis/vAxis.format.

Wykresy Dual-X

Uwaga: osie Dux-X są dostępne tylko w przypadku wykresów materiałowych (tj. tych z pakietem bar).

Czasami na wykresie słupkowym chcesz wyświetlić 2 serie z 2 niezależnymi osiami X: oś 1 na górze i 2 oś: