Wizualizacja: wykres słupkowy (obraz)

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

Omówienie

Wykres słupkowy renderowany jako obraz za pomocą interfejsu Google Charts API.

Przykład

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagebarchart"]});
      google.charts.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.ImageBarChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Wczytuję

Nazwa pakietu google.charts.load to "imagebarchart" 

  google.charts.load("current", {packages: [[]"imagebarchart"]});

Nazwa klasy wizualizacji to google.visualization.ImageBarChart 

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

Format danych

Pierwsza kolumna powinna być ciągiem znaków i zawierać etykietę kategorii. Po niej może następować dowolna liczba kolumn (wszystkie muszą mieć wartości liczbowe). Każda kolumna jest wyświetlana jako zbiór słupków. Gdy tabela danych zawiera więcej niż 1 kolumnę liczbową, wartości w wierszu są wyświetlane jako słupki skumulowane.

Opcje konfiguracji

Nazwa Typ Domyślne Opis
backgroundColor string, '#FFFFFF' (biała) Kolor tła wykresu w formacie kolorów interfejsu Chart API.
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.
wysokość Liczba Wysokość kontenera Wysokość wykresu w pikselach.
isStacked boolean prawda Określa, czy wiele kolumn danych ma być wyświetlanych w postaci słupków skumulowanych (a nie zgrupowanych).
isVertical boolean false Określa, czy słupki mają być pionowe.
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.
maksimum Liczba automatyczna Maksymalna wartość wyświetlana na osi Y.
min Liczba automatyczna Minimalna wartość wyświetlana na osi Y.
showCategoryLabels boolean prawda Jeśli zasada ma wartość Fałsz, etykiety kategorii są usuwane.
showValueLabels boolean prawda Jeśli zasada ma wartość Fałsz, powoduje usunięcie etykiet wartości.
tytuł string, bez tytułu Tekst do wyświetlenia nad wykresem.
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 Szerokość kontenera Szerokość wykresu w pikselach.

Metody

Metoda Typ zwracanej wartości Opis
draw(data, options) brak Rysuje wykres.

Zdarzenia

Możesz się zarejestrować, aby słyszeć zdarzenia opisane na stronie Ogólny wykres obrazu.

Zasady dotyczące danych

Zapoznaj się z zasadami logowania interfejsu Chart API.