Wizualizacja: wykres słupkowy (obraz)

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ł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 i powinna zawierać etykietę kategorii. Dalej można umieścić dowolną liczbę kolumn (wszystkie muszą mieć wartości liczbowe). Każda kolumna jest wyświetlana jako zestaw słupków. Jeśli tabela danych zawiera więcej niż jedną kolumnę numeryczną, wartości w wierszu są wyświetlane jako skumulowane paski.

Opcje konfiguracji

Nazwa Typ Domyślna Opis
backgroundColor, tekst „#FFFFFF” (biały) Kolor tła wykresu w formacie koloru interfejsu Chart API.
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.
wysokość liczba Wysokość kontenera Wysokość wykresu w pikselach.
Jest skumulowany wartość logiczna prawda Określa, czy wiele kolumn danych ma być wyświetlanych jako skumulowane (w odróżnieniu od zgrupowanych).
to branża wartość logiczna fałsz Określa, czy słupki będą pionowe.
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.
maks. liczba automatycznie Maksymalna wartość wyświetlana na osi Y.
minuta liczba automatycznie Minimalna wartość wyświetlana na osi Y.
Etykieta programu wartość logiczna prawda Jeśli ma wartość Fałsz, etykiety kategorii są usuwane.
Etykiety programu ShowValue wartość logiczna prawda Jeśli ma wartość Fałsz, etykiety wartości są usuwane.
tytuł tekst brak tytułu Tekst do wyświetlenia nad wykresem.
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 Szerokość kontenera Szerokość wykresu w pikselach.

Metody

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

Zdarzenia

Możesz zarejestrować się, by usłyszeć zdarzenia opisane na stronie Ogólny wykres graficzny.

Zasady dotyczące danych

Więcej informacji znajdziesz w zasadach rejestrowania interfejsu Chart API.