Wizualizacja: wykres warstwowy (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 warstwowy 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:["imageareachart"]});
      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.ImageAreaChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Wczytuję

Nazwa pakietu google.charts.load to "imageareachart" 

  google.charts.load('current', {packages: ['imageareachart']});

Nazwa klasy wizualizacji to google.visualization.ImageAreaChart 

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

Format danych

Każda kolumna reprezentuje linię na wykresie. Każdy wpis stanowi wartość na osi Y w tym samym punkcie osi X. Wizualizacja łączy je za pomocą linii prostej, a następnie wypełnia obszar pod linią.

Dane są przetwarzane według kolumn, zaczynając od kolumny 0 i rosnąc. Najpierw musisz napisać najwyższe linie, a potem te niższe, ponieważ jeśli pomalujesz najpierw niższą linię, ta wyższa zostanie zasłonięta, a dolne linie zakryją. Dlatego kolumna 1 powinna mieć wyższe punkty niż kolumna 2, kolumna 2 – wyżej niż kolumna 3 itd. Jeśli w prawej kolumnie masz 1 lub 2 punkty wyżej niż w lewej kolumnie, może ona częściowo zasłonić dolną linię, ale nadal powinna być ona widoczna.

Wszystkie dane muszą mieć typ numeryczny, z wyjątkiem pierwszego typu, który może być liczbą lub ciągiem znaków. Jeśli pierwsza kolumna zawiera ciąg znaków, pierwsze wpisy w tej kolumnie będą wyświetlane jako etykiety na osi X. Jeśli pierwsza kolumna zawiera liczbę, etykiety osi X nie będą wyświetlane. Wszystkie kolumny (z wyjątkiem pierwszej) muszą zawierać liczby. Liczba kolumn jest nieograniczona.

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.
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, usuwa etykiety kategorii (etykiety osi X).
showValueLabels boolean prawda Jeśli zasada ma wartość Fałsz, usuwa etykiety wartości (etykiety osi Y).
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 graficzny.

Zasady dotyczące danych

Zapoznaj się z zasadami logowania interfejsu Chart API.