Wizualizacja: wskaźnik

  1. Overview
  2. Przykład
  3. Wczytuję
  4. Format danych
  5. Opcje konfiguracji
  6. Metody
  7. Zdarzenia
  8. Zasady dotyczące danych

Omówienie

Wskaźnik z tarczą renderowany w przeglądarce za pomocą SVG lub VML.

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

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

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

Obecnie nie ma możliwości określenia tytułu wykresu wskaźnikowego, tak jak w przypadku innych Wykresów Google. W przykładzie powyżej do wyświetlenia tytułu skorzystano z prostego kodu HTML.

Poza tym opcja animation.startup dostępna dla wielu innych Wykresów Google nie jest dostępna dla wykresu wskaźnikowego. Jeśli chcesz utworzyć animację przy uruchamianiu, narysuj wykres na początku z wartościami ustawionymi na zero, a potem narysuj go ponownie z wartością, która ma być animowana.

Wczytuję

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

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

Nazwa klasy wizualizacji to google.visualization.Gauge. 

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

Format danych

Każda wartość liczbowa jest wyświetlana w postaci wskaźnika. Obsługiwane są 2 alternatywne formaty danych:

  1. Dwie kolumny. Pierwsza kolumna powinna być ciągiem znaków i zawierać etykietę wskaźnika. Druga kolumna powinna być liczbą i zawierać wartość wskaźnika.
  2. Dowolna liczba kolumn liczbowych. Etykieta każdego wskaźnika to etykieta kolumny.

Opcje konfiguracji

Nazwa
animation.duration

Czas trwania animacji w milisekundach. Szczegółowe informacje znajdziesz w dokumentacji animacji.

Typ: liczba
Wartość domyślna: 400
animation.easing

Funkcja wygładzania zastosowana do animacji. Dostępne są te ustawienia:

  • „liniowy” – stała prędkość.
  • „W” – Przyspiesz, zacznij powoli i powoli.
  • „out” – zwolnij – zacznij szybko i spokojnie.
  • 'inAndOut' – przyspieszasz i zwalniasz – zaczynaj powoli, potem przyspiesz, a potem zwolnij.
Typ: ciąg znaków
Domyślnie: „liniowy”
forceIFrame

Rysuje wykres wewnątrz ramki wbudowanej. (Pamiętaj, że w IE8 ta opcja jest ignorowana – wszystkie wykresy w IE8 są rysowane w ramkach i-frame).

Typ: wartość logiczna
Wartość domyślna: fałsz.
greenColor

Kolor dla zielonej sekcji w notacji koloru HTML.

Typ: ciąg znaków
Domyślnie: „#109618”.
greenFrom

Najniższa wartość w zakresie oznaczonym zielonym kolorem.

Typ: liczba
Wartość domyślna: brak
greenTo

Najwyższa wartość w zakresie oznaczonym zielonym kolorem.

Typ: liczba
Wartość domyślna: brak
wysokość

Wysokość wykresu w pikselach.

Typ: liczba
Domyślna:szerokość kontenera.
majorTicks

Etykiety głównych znaczników. Liczba etykiet określa liczbę głównych taktów we wszystkich wskaźnikach. Wartość domyślna to 5 głównych taktów z etykietami minimalnej i maksymalnej wartości wskaźnika.

Typ: tablica ciągów znaków
Wartość domyślna: brak
maksimum

Maksymalna wartość wskaźnika.

Typ: liczba
Wartość domyślna: 100
min

Minimalna wartość wskaźnika.

Typ: liczba
Wartość domyślna: 0
minorTicks

Liczba sekcji mniejszych znaków w każdej z powyższych sekcji.

Typ:liczba
Wartość domyślna: 2
redColor

Kolor, który będzie używany w czerwonej sekcji, w notacji koloru HTML.

Typ: ciąg znaków
Domyślnie: „#DC3912”.
redFrom

Najniższa wartość w zakresie oznaczonym czerwonym kolorem.

Typ: liczba
Wartość domyślna: brak
redTo

Najwyższa wartość w zakresie oznaczonym czerwonym kolorem.

Typ: liczba
Wartość domyślna: brak
szerokość

Szerokość wykresu w pikselach.

Typ: liczba
Domyślna:szerokość kontenera.
yellowColor

Kolor używany w sekcji żółtej w notacji kolorów HTML.

Typ: ciąg znaków
Domyślnie: „#FF9900”
yellowFrom

Najniższa wartość w zakresie oznaczonym żółtym kolorem.

Typ: liczba
Wartość domyślna: brak
yellowTo

Najwyższa wartość w zakresie oznaczonym żółtym kolorem.

Typ: liczba
Wartość domyślna: brak

Metody

Metoda
draw(data, options)

Rysuje wykres.

Return Type: brak
clearChart()

Czyści wykres i zwalnia wszystkie przydzielone Ci zasoby.

Return Type: brak

Zdarzenia

Brak wywołanych zdarzeń.

Zasady dotyczące danych

Cały kod i dane są przetwarzane i renderowane w przeglądarce. Żadne dane nie są wysyłane na żaden serwer.