Динамическое изменение данных и цветов Google Chart Gauge в зависимости от значения ячейки

Я делаю панель инструментов в Google Spreadsheet и хотел бы использовать данные ячеек. Теперь вам нужно жестко закодировать данные и значения для redFrom, redTo и т. Д., Но я хочу, чтобы они были динамическими и зависели от определенного значения в ячейке. То же самое относится к значениям, показанным датчиком.

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

Это стандартный пример от Google:

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

Поэтому я хочу, чтобы это было примерно так:

<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'],
          ['A1', A2],
          ['B1', B2],
          ['C1', C2]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: D1, redTo: D2,
          yellowFrom:D3, yellowTo: D4,
          minorTicks: 5
        };

Это возможно? Спасибо!

Источник

1 ответ

Если графики будут работать на HTML-странице,
Вы можете запросить лист, используя -> google.visualization.Query

Ниже приведен пример использования электронной таблицы образца -> данные датчика

столбцы A и B используются для данных диаграммы

столбцы DI предназначены для значений цвета от / до

setQuery метод используется для разделения двух диапазонов в таблицы данных

сначала получите данные графика, данные опций, затем нарисуйте график...

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

  // get chart data
  var queryChart = new google.visualization.Query('https://docs.google.com/spreadsheets/d/16IeSOMvl4-B3qFr386kjZA-vSRIHTNvSIigqyracGj0/edit#gid=0');
  queryChart.setQuery('select A,B');
  queryChart.send(function (responseChart) {

    var dataChart = responseChart.getDataTable();

    // get options data
    var queryOptions = new google.visualization.Query('https://docs.google.com/spreadsheets/d/16IeSOMvl4-B3qFr386kjZA-vSRIHTNvSIigqyracGj0/edit#gid=0');
    queryOptions.setQuery('select D,E,F,G,H,I');
    queryOptions.send(function (responseOptions) {

      var dataOptions = responseOptions.getDataTable();

      var options = {
        minorTicks: 5
      };

      options.redFrom = dataOptions.getValue(0, 0);
      options.redTo = dataOptions.getValue(0, 1);
      options.yellowFrom = dataOptions.getValue(0, 2);
      options.yellowTo = dataOptions.getValue(0, 3);
      options.greenFrom = dataOptions.getValue(0, 4);
      options.greenTo = dataOptions.getValue(0, 5);

      var chart = new google.visualization.Gauge(document.getElementById('chart_div'))
      chart.draw(dataChart, options);
    });

  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

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