Question

我在Google电子表格中制作了一个信息中心，并希望使用单元格数据。现在你需要硬编码redFrom，redTo等数据和值，但我希望它们是动态的并且依赖于单元格中的某个值。同样适用于仪表显示的值。

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

这是google的标准示例：

＆＃13;

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

＆＃13;

所以我希望它是这样的：

＆＃13;

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

＆＃13;

这可能吗？谢谢！

Answer 1

如果图表将在html页面中运行，
您可以使用 - ＆gt;查询工作表google.visualization.Query

以下是一个示例，使用示例电子表格 - ＆gt; gauge data

列A＆amp; B用于仪表图数据

列D-I用于从/到颜色值

setQuery方法用于将两个范围分成数据表

首先，获取图表数据，选项数据，然后绘制图表......

＆＃13;

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

＆＃13;

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

＆＃13;

根据单元格值

1 个答案: