Wizualizacja: wykres liniowy (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 liniowy 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:["imagelinechart"]});
      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.ImageLineChart(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 "imagelinechart". 

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

Nazwa klasy wizualizacji to google.visualization.ImageLineChart. 

  var visualization = new google.visualization.ImageLineChart(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 w osobnym wierszu.

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.
liniaAxisLine wartość logiczna prawda Jeśli ma wartość Fałsz, linie osi i etykiety są usuwane.
Etykieta programu wartość logiczna to samo co showAxisLines Jeśli ma wartość Fałsz, etykiety kategorii są usuwane (etykiety osi X).
Etykiety programu ShowValue wartość logiczna to samo co showAxisLines 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ę, 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.