Wizualizacja: wykres warstwowy (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 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żda pozycja to wartość osi Y w tym samym punkcie X, a wizualizacja łączy je z prostą linią, a następnie wypełnia obszar pod linią.

Dane są przetwarzane przez kolumnę, zaczynając od zera i zwiększające ją. Najpierw pisz najwyżej linie, a następnie dolne, bo jeżeli najpierw namalujesz dolną linię, wyższa linia również zostanie wymalowana, a wszystkie niższe. W związku z tym upewnij się, że kolumna 1 zawiera więcej punktów niż kolumna 2, kolumna 2 jest wyższa od kolumny 3 itd. Jeśli 1 lub 2 punkty w prawej kolumnie są wyższe niż lewa kolumna, może ona częściowo zasłaniać dolną linię, ale nadal powinna być widoczna.

Wszystkie dane muszą być wartościami liczbowymi z wyjątkiem pierwszego, który może być liczbą lub ciągiem znaków. Jeśli pierwsza kolumna jest ciągiem znaków, pierwsze wpisy kolumn będą wyświetlane jako etykiety X. Jeśli pierwsza kolumna będzie liczbą, etykiety osi X nie będą wyświetlane. Wszystkie kolumny (z wyjątkiem pierwszej) muszą zawierać cyfry. Nie ma limitu liczby kolumn.

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.
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 osi X).
Etykiety programu ShowValue wartość logiczna prawda Jeśli ma wartość Fałsz, etykiety wartości są usuwane (etykiety osi Y).
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ę i usłyszeć zdarzenia opisane na stronie Ogólny wykres graficzny.

Zasady dotyczące danych

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