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

Jeden lub kilka miniwykresów renderowanych za pomocą obrazów 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 pojedynczy wykres.

Opcje konfiguracji

Nazwa Typ Domyślna Opis
kolor tekst Określa kolor używany we wszystkich wykresach. Ciąg w formacie #rrggbb. Na przykład: „#00cc00”. Używana tylko wtedy, gdy nie określono opcji colors.
kolory Tablica ciągów znaków Kolory domyślne Kolory kolumn danych. Tablica ciągów znaków, w których każdy element to ciąg w formacie #rrggbb. 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 ujęty wokół siebie.
fill wartość logiczna fałsz Jeśli wybrano opcję prawda, kolor będzie wypełniać obszar pod linią.
wysokość liczba Wysokość kontenera Wysokość obrazów w pikselach.
Pozycja etykiety tekst brak Pozycja etykiet. Obsługiwane wartości to „none”, „left”, „right”.
maks. Tablica liczb Maksymalna wartość danych dla miniwykresu Najwyższa wartość zakresu danych na miniwykresie. Indeks w tablicy musi być zgodny z indeksem kolumny w tabeli danych. Jeśli wszystkie wartości mają wartość null, będzie to maksymalna wartość w serii.
minuta Tablica liczb Minimalna wartość danych każdej miniwykresu Najniższa wartość zakresu danych na miniwykresie. Indeks w tablicy musi być zgodny z indeksem kolumny w tabeli danych. Jeśli wszystkie wartości są puste, jest to minimalna wartość w serii.
liniaAxisLine wartość logiczna prawda Jeśli ma wartość true (prawda), linie osi są wyświetlane. Jeśli ma wartość false (fałsz), nie są, a wartością domyślną funkcji showValueLabels jest false (fałsz).
Etykiety programu ShowValue wartość logiczna true (prawda), chyba że showAxisLines ma wartość false (fałsz). Jeśli ma wartość true (prawda), etykiety osi czasu są wyświetlane.
tytuł Tablica ciągów znaków Nie są wyświetlane żadne tytuły Tytuły do użycia w poszczególnych wykresach.
szerokość liczba Szerokość kontenera Szerokość wykresów w pikselach.
układ : layout (might be used for DTP, web and app design) tekst „v” Układ pionowy lub poziomy: „v” w pionie, „h” w poziomie.

Metody

Metoda Typ zwracanej wartości Opis
draw(data, options) brak Rysuje wykres.
getSelection() Tablica elementów wyboru Zwraca indeksy wybranych wykresów jako tablicę obiektów. Każdy obiekt ma właściwość dotyczącą kolumny zawierającą numer kolumny wybranego miniwykresu. Może zwrócić więcej niż jedną wybraną kolumnę.
setSelection(selection) brak Powoduje wybranie określonych wykresów przebiegu w czasie i odznaczenie tych, 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 miniwykresu. Więcej informacji znajdziesz w sekcji setSelection().

Zdarzenia

Nazwa Opis Usługi
wybierz Standardowe zdarzenie wyboru. Brak

Zasady dotyczące danych

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