Wizualizacja: wykres liniowy (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 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 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 osobna linia.

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.
showAxisLines boolean prawda Jeśli zasada ma wartość Fałsz, usuwa linie osi i etykiety.
showCategoryLabels boolean taka sama jak showAxisLines Jeśli zasada ma wartość Fałsz, usuwa etykiety kategorii (etykiety osi X).
showValueLabels boolean taka sama jak showAxisLines 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 obrazu.

Zasady dotyczące danych

Zapoznaj się z zasadami logowania interfejsu Chart API.