如何将第二个图表添加到谷歌图表的仪表板中？

Question

I'm suppose to display 3 graphs and a controller. 我想要显示3个图形和一个控制器。 I have one graph and a controller for it. 我有一个图表和一个控制器。 now I need to use the same database (spreadsheet link) to create two more charts other than pie chart, example bar chart or line chart or .... my code so far is below. 现在我需要使用相同的数据库（电子表格链接）创建除饼图，示例条形图或折线图之外的其他两个图表或....我的代码到目前为止。

I have recently started javascript and this is just my first week so I don't know how to get it work. 我最近开始使用javascript，这只是我的第一周所以我不知道如何让它工作。 any help is appreciated. 任何帮助表示赞赏。

PS you may use any column you want for chart. PS你可以使用你想要的任何列图表。

 <html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load the Visualization API and the controls package. google.charts.load('current', { 'packages': ['corechart', 'controls'] }); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawDashboard); // Callback that creates and populates a data table, // instantiates a dashboard, a range slider and a pie chart, // passes in the data and draws it. function drawDashboard() { // Create our data table. var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1PlT8k6qXsCkOCEEJFn7apKYgDunLi1Lzmnmo_AKQBXc/edit#gid=0'); query.setQuery('SELECT C,H LIMIT 10 OFFSET 3'); query.send(handleQueryResponse); } function handleQueryResponse(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); var data_view = new google.visualization.DataView(data); data_view.setColumns([ // 0'th column formatted to string. { calc: function(data, row) { return data.getFormattedValue(row, 0); }, type: 'string' }, // 1th column. 1 ]); // Create a dashboard. var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard_div')); // Create a range slider, passing some options var donutRangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'filter_div', 'options': { 'filterColumnIndex': 1 } }); // Create a pie chart, passing some options var pieChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'chart_div', 'options': { 'width': 300, 'height': 300, 'pieSliceText': 'value', 'legend': 'right' } }); // Establish dependencies, declaring that 'filter' drives 'pieChart', // so that the pie chart will only display entries that are let through // given the chosen slider range. dashboard.bind(donutRangeSlider, pieChart); // Draw the dashboard. dashboard.draw(data_view); } </script> </head> <body> <!--Div that will hold the dashboard--> <div id="dashboard_div"> <!--Divs that will hold each control and chart--> <div id="filter_div"></div> <div id="chart_div"></div> </div> </body> </html>

Answer 1

if using the same data source, then just add more charts in the same function as the existing chart... 如果使用相同的数据源，那么只需在与现有图表相同的功能中添加更多图表...

be sure to add containers <div> 一定要添加容器<div>

and the dashboard will take an array of controls and / or charts... 仪表板将采用一系列控件和/或图表......

dashboard.bind(donutRangeSlider, [pieChart, colChart, lineChart]);

see following working snippet... 请参阅以下工作代码段...

 <html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load the Visualization API and the controls package. google.charts.load('current', { 'packages': ['corechart', 'controls'] }); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawDashboard); // Callback that creates and populates a data table, // instantiates a dashboard, a range slider and a pie chart, // passes in the data and draws it. function drawDashboard() { // Create our data table. var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1PlT8k6qXsCkOCEEJFn7apKYgDunLi1Lzmnmo_AKQBXc/edit#gid=0'); query.setQuery('SELECT C,H LIMIT 10 OFFSET 3'); query.send(handleQueryResponse); } function handleQueryResponse(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); var data_view = new google.visualization.DataView(data); data_view.setColumns([ // 0'th column formatted to string. { calc: function(data, row) { return data.getFormattedValue(row, 0); }, type: 'string' }, // 1th column. 1 ]); // Create a dashboard. var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard_div')); // Create a range slider, passing some options var donutRangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'filter_div', 'options': { 'filterColumnIndex': 1 } }); // Create a pie chart, passing some options var pieChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'chart_div', 'options': { 'width': 300, 'height': 300, 'pieSliceText': 'value', 'legend': 'right' } }); // Create a column chart var colChart = new google.visualization.ChartWrapper({ 'chartType': 'ColumnChart', 'containerId': 'chart_div_col', 'options': { 'width': 300, 'height': 300, 'pieSliceText': 'value', 'legend': 'right' } }); // Create a line chart var lineChart = new google.visualization.ChartWrapper({ 'chartType': 'LineChart', 'containerId': 'chart_div_line', 'options': { 'width': 300, 'height': 300, 'pieSliceText': 'value', 'legend': 'right' } }); // Establish dependencies, declaring that 'filter' drives 'pieChart', // so that the pie chart will only display entries that are let through // given the chosen slider range. dashboard.bind(donutRangeSlider, [pieChart, colChart, lineChart]); // Draw the dashboard. dashboard.draw(data_view); } </script> </head> <body> <!--Div that will hold the dashboard--> <div id="dashboard_div"> <!--Divs that will hold each control and chart--> <div id="filter_div"></div> <div id="chart_div"></div> <div id="chart_div_col"></div> <div id="chart_div_line"></div> </div> </body> </html>

如何将第二个图表添加到谷歌图表的仪表板中？

问题描述

1 个解决方案

解决方案1
0 2017-06-19 12:30:00

如何将第二个图表添加到谷歌图表的仪表板中？

问题描述

1 个解决方案

解决方案1 0 2017-06-19 12:30:00

解决方案1
0 2017-06-19 12:30:00