根据单元格值动态更改Google Chart Gauge数据和颜色

我在Google Spreadsheet中制作了一个仪表板并希望使用单元格数据。现在你需要对数据和redFrom，redTo等等的数据进行硬编码，但我希望它们是动态的并且依赖于单元格中的某个值。同样适用于仪表显示的数值。根据单元格值动态更改Google Chart Gauge数据和颜色

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

这是从谷歌标准的例子：

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

这可能吗？谢谢！

来源

2017-10-05 Pabz

澄清，是您在电子表格中构建仪表板？或在网页上构建仪表板，并且想要从电子表格中提取值？ – WhiteHat

@WhiteHat我打算在电子表格中调用HTML页面的仪表板菜单，以便函数onOpen（）{ SpreadsheetApp.getUi（） .createMenu（'Dashboard'） .addItem（'Open1'，'openDialog'） .addToUi（）; } 功能openDialog（）{ VAR HTML = HtmlService.createHtmlOutputFromFile（ '索引'） .setSandboxMode（HtmlService.SandboxMode.IFRAME） .setWidth（1000） .setHeight（750）; SpreadsheetApp.getUi（） .showModalDialog（html，'My custom dialog'）; }' – Pabz

如果图表将在HTML页面中运行，
可以查询使用薄片 - 以下>google.visualization.Query

是一个例子，使用的示例电子表格 - >gauge data

列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-05 16:18:33 WhiteHat

感谢您的回复。我有一些问题在html页面中运行。还有什么机会可以帮助我呢？在Google Spreadsheet中，我使用openDialog函数，然后在对话框中调用一个html页面，但是我没有成功将这段代码加载到html页面中。 – Pabz

从未在谷歌电子表格中使用的代码，但我可以尝试帮助 - 当你加载的HTML，它是从一个文件已经保存在某个地方？ – WhiteHat

我会在下面的答案中写下代码 – Pabz

根据单元格值动态更改Google Chart Gauge数据和颜色

回答

相关问题