Ta strona została przetłumaczona przez Cloud Translation API.

Wizualizacja: wskaźnik

Overview
Przykład
Wczytuję
Format danych
Opcje konfiguracji
Metody
Zdarzenia
Zasady dotyczące danych

Omówienie

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

Przykład

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);
      }

<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:

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.
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.