0

我正在 Google 电子表格中制​​作仪表板，并想使用单元格数据。现在您需要对 redFrom、redTo 等的数据和值进行硬编码，但我希望它们是动态的并且依赖于单元格中的某个值。同样适用于仪表显示的值。

仪表板将跟踪月收入，仪表将根据相对于目标的百分比指示某人是否在该月处于绿色状态。

这是来自谷歌的标准示例：

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

这可能吗？谢谢！

4

1 回答 1

0

如果图表将在 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>

于 2017-10-05T16:18:33.587 回答