Wizualizacja: Miniwykres (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

Pojedyncze lub wiele wykresów przebiegu w czasie renderowanych z obrazami przy użyciu interfejsu Google Charts API. Obrazy są zawarte w tabeli HTML.

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:["imagesparkline"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
         ['Revenue', 'Licenses'],
         [435, 132],
         [438, 131],
         [512, 137],
         [460, 142],
         [491, 140],
         [487, 139],
         [552, 147],
         [511, 146],
         [505, 151],
         [509, 149]
        ]);

        var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div'));

        chart.draw(data, {width: 120, height: 40, showAxisLines: false,  showValueLabels: false, labelPosition: 'left'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 120px; height: 40px;"></div>
  </body>
</html>

Wczytuję

Nazwa pakietu google.charts.load to "imagesparkline". 

  google.charts.load("current", {packages: ["imagesparkline"]});

Nazwa klasy wizualizacji to google.visualization.ImageSparkLine. 

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

Format danych

Dowolna liczba kolumn. Wszystkie kolumny powinny zawierać liczby. Każda kolumna jest wyświetlana jako jeden miniwykres.

Opcje konfiguracji

Nazwa Typ Domyślne Opis
kolor string, Określa kolor używany na wszystkich wykresach. Ciąg w formacie #rrggbb. Na przykład: „#00cc00”. Używana tylko wtedy, gdy opcja colors nie jest określona.
kolory Tablica ciągów Kolory domyślne Kolory, które mają być używane w kolumnach danych. Tablica ciągów znaków w formacie #rrggbb, z których każdy jest ciągiem znaków. Na przykład: „#00cc00”. Kolor i jest używany w kolumnie danych i. Jeśli liczba kolorów jest mniejsza niż liczba kolumn, wybór koloru zostanie zawinięty.
fill boolean false Jeśli ma wartość true (prawda), obszar pod linią zostanie wypełniony kolorem.
wysokość Liczba Wysokość kontenera Wysokość zdjęć w pikselach.
labelPosition string, brak Pozycja etykiet. Obsługiwane wartości to „none”, „left”, „right”.
maksimum Tablica liczb Maksymalna wartość danych każdego miniwykresu Najwyższa wartość z zakresu wartości danych każdego miniwykresu. Indeks w tablicy musi być zgodny z indeksem kolumny w DataTable. Jeśli wszystkie wartości mają wartość null, jest to wartość maksymalna w serii.
min Tablica liczb Minimalna wartość danych każdego miniwykresu Najniższa wartość z zakresu wartości danych każdego wykresu. Indeks w tablicy musi być zgodny z indeksem kolumny w DataTable. Jeśli wszystkie wartości mają wartość null, jest to wartość minimalna w serii.
showAxisLines boolean prawda Jeśli ma wartość prawda, linie osi są wyświetlane. Jeśli mają wartość false (fałsz), nie, a domyślna wartość parametru showValuelabel to false.
showValueLabels boolean true (prawda), chyba że showAxisLines ma wartość false (fałsz). Jeśli ma wartość prawda, etykiety osi wartości są wyświetlane.
tytuł Tablica ciągów Nie są wyświetlane żadne tytuły Tytuły do użycia w każdym miniwykresie.
szerokość Liczba Szerokość kontenera Szerokość wykresów w pikselach.
układ : layout (might be used for DTP, web and app design) string, „v” Układ pionowy lub poziomy: „v” – pionowy, „h” – poziomy.

Metody

Metoda Typ zwracanej wartości Opis
draw(data, options) brak Rysuje wykres.
getSelection() Tablica elementów zaznaczenia Zwraca indeksy wybranych wykresów jako tablicę obiektów. Każdy obiekt ma właściwość kolumny zawierającą numer kolumny wybranego miniwykresu. Może zwrócić więcej niż jedną wybraną kolumnę.
setSelection(selection) brak Wybiera określone miniwykresy i odznacza te, które nie zostały określone. wybór to tablica obiektów, każdy z liczbową właściwością column, która jest indeksem wybranego wykresu przebiegu w czasie. Więcej informacji znajdziesz na setSelection().

Zdarzenia

Nazwa Opis Właściwości
wybierz Standardowe zdarzenie wyboru. Brak

Zasady dotyczące danych

Zapoznaj się z zasadami logowania interfejsu Chart API.