Озабоченность по поводу Google API Gauge

Прежде чем перейти к тому, что я планирую сделать, я хотел бы сначала узнать, возможно ли изменение изображений датчиков Google Gauges в соответствии с тем, что я хочу... Я имею в виду отображение / изображение датчика в API. манипулировать / установить моим кодом. Это возможно? Я все еще гуглю по этому поводу и пока не нашел ничего, поэтому я решил спросить здесь.

Я ценю любую помощь. Спасибо.

ниже приведен пример кода, который я получил с веб-сайта Google API

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['gauge']});
      google.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);
      }
    </script>
  </head>
  <body>
    <div id='chart_div'></div>
  </body>
</html>
Источник

1 ответ

Звучит так, будто вы пытаетесь динамически изменять значения датчиков (то есть, куда указывают иглы), и это именно то, что датчик может сделать.

Во-первых, вам нужно решить, сколько датчиков вы хотите. Вы определяете их, когда составляете таблицу данных, которую вы подаете на датчик:

var data = google.visualization.arrayToDataTable([
   ['Label', 'Value'],
   ['Gauge1', 80],
   ['#2', 55],
   ['Third One', 68]
]);

Важно понимать, что это создает объект "DataTable", который немного похож на электронную таблицу. Это три строки и два столбца (первый массив "['Label', 'Value']" определяет имена столбцов). Каждая строка содержит метку и значение для первого измерителя (он будет помечен как "Gauge1" и будет начинаться со значения 80), а следующий ряд - это метка и значение для второго измерителя и т. Д.

Если вы когда-нибудь захотите изменить значение датчика, вам нужно изменить числа в объекте "data" (с помощью.setValue(строка, столбец, значение), а затем указать датчику перерисовать. Например,

data.setValue(0, 1, 30);

Это будет устанавливать строку-0, столбец-1 равным 30. Строка-0 соответствует первому датчику. Столбец 1 соответствует его значению (мы не хотим обновлять его метку... это будет столбец 0). Итак, чтобы обновить значения всех трех датчиков, мы бы использовали что-то вроде:

data.setValue(0, 1, 30); // Set "Gauge1" to 30
data.setValue(1, 1, 45); // Set "#2" to 45
data.setValue(2, 1, 12); // Set "Third One" to 12
chart.draw(data, options);

Я всегда просто делаю объект данных глобальным, а затем я могу просто изменить значения, хотя я предполагаю, что вы можете заново сгенерировать объект данных полностью, каждый раз с помощью arrayToDataTable().

Источник
Другие вопросы по тегам