根據單元格值動態更改Google Chart Gauge數據和顏色
[英]Dynamically change Google Chart Gauge data and colors based on cell value
問題描述
我正在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 個解決方案
解決方案1
0 2017-10-05 16:18:33
如果圖表將在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>
AngularJS：根據單元格值在動態生成的表中更改單元格類
[英]AngularJS: Change cell class in a dynamically generated table based on cell value
如何更改angular-google-charts儀表圖的針顏色？
[英]How to change the needle color of gauge chart of angular-google-charts?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.