如何将第二个图表添加到谷歌图表的仪表板中？
[英]How to add second chart into the dashboard in google charts?
问题描述
我想要显示3个图形和一个控制器。 我有一个图表和一个控制器。 现在我需要使用相同的数据库（电子表格链接）创建除饼图，示例条形图或折线图之外的其他两个图表或....我的代码到目前为止。
我最近开始使用javascript，这只是我的第一周所以我不知道如何让它工作。 任何帮助表示赞赏。
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>
1 个解决方案
解决方案1
0 2017-06-19 12:30:00
如果使用相同的数据源，那么只需在与现有图表相同的功能中添加更多图表...
一定要添加容器<div>
仪表板将采用一系列控件和/或图表......
dashboard.bind(donutRangeSlider, [pieChart, colChart, lineChart]);
请参阅以下工作代码段...
<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>
如何在仪表板中添加按钮以在两种类型的谷歌图表之间切换
[英]how to add buttons to switch between two types of google charts in a dashboard
如何确保Google图表仪表板上的已过滤饼图保持一致的切片颜色？
[英]How can I ensure that a filtered pie chart in a Google Charts dashboard maintains consistent slice colors?
如何在 angular-google-charts 中将“工具提示”添加到时间轴图表？
[英]How to add 'tooltip' to Timeline chart in angular-google-charts?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.