根據單元格值動態更改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數據和顏色

回答

相關問題