Google Chart仪表板有多个数据
[英]Google Chart dashboard multiple data
问题描述
我为每个圆环图创建了一个包含不同数据的Google图表信息中心，但只有data_2返回，而不是第一个图表<div> data_1和第二个图表<div> data_2。 具有不同数据的多图表的源文档需要单独的功能，但是有没有办法在第一个函数drawStuff_1中使用两个数据集？
我最终想要一个仪表板，一个ControlWrapper（一对多），多个数据集（carlos，josh等）和多个圆环图（ <div>表示卡洛斯， <div>表示josh，无论是谁）。
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart', 'controls']}); google.charts.setOnLoadCallback(drawStuff_1); google.charts.setOnLoadCallback(drawStuff_2); function drawStuff_1() { var dashboard = new google.visualization.Dashboard( document.getElementById('programmatic_dashboard_div')); programmaticFilter_1 = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'programmatic_control_div_1', 'options': { 'filterColumnLabel': 'Status', 'ui': {'labelStacking': 'vertical'} } }); // First dataset var data_1 = new google.visualization.arrayToDataTable([ ['Status', 'Count'], ['Dual Approved' , 5], ['Approved', 7], ['Review', 3], ['Draft', 2], ['Not In', 6], ['Edit Rerun', 1], ]); programmaticChart_1 = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'programmatic_chart_div_1', 'options': { 'width': 290, 'height': 220, 'chartArea': {'left': 20, 'top': 20, 'right': 0, 'bottom': 0}, 'pieSliceText': 'value', //percentage' 'value' 'label''none' 'pieHole': 0.4, 'legend': {position: 'left', textStyle: {color: 'black', fontSize: 9, fontName: 'Garamond' }}, 'pieSliceBorderColor': 'Black', 'title': 'Josh', } }); dashboard.bind(programmaticFilter_1, programmaticChart_1); dashboard.draw(data_1); } function drawStuff_2() { var dashboard = new google.visualization.Dashboard( document.getElementById('programmatic_dashboard_div')); // second dataset var data_2 = new google.visualization.arrayToDataTable([ ['Status', 'Count'], ['Dual Approved' , 1], ['Approved', 10], ['Review', 2], ['Draft', 9], ['Not In', 10], ['Edit Rerun', 4], ]); programmaticChart_2 = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'programmatic_chart_div_2', 'options': { 'width': 250, 'height': 220, 'legend': 'none', 'chartArea': {'left': 20, 'top': 20, 'right': 0, 'bottom': 0}, 'pieSliceText': 'value', //percentage' 'value' 'label''none' 'pieHole': 0.4, 'pieSliceBorderColor': 'Black', 'title': 'Carlos', } }); dashboard.bind(programmaticFilter_1, programmaticChart_2); dashboard.draw(data_2); } </script> <body> <div id="programmatic_dashboard_div" style="border: 1px solid #ccc"> <td> <div id="programmatic_control_div_1" style="padding-left: 2em; min-width: 250px"></div> </td> <table class="columns"> <tr> <td> <div id="programmatic_chart_div_1"></div> </td> <td> <div id="programmatic_chart_div_2"></div> </td> </tr> </table> </div> </body>
1 个解决方案
解决方案1
3 已采纳 2016-09-05 02:07:18
首先， setOnLoadCallback只能使用一次
但这是一个简单的解决方法，您可以直接在load语句中包含callback
google.charts.load('current', {
callback: drawStuff,
packages:['corechart', 'controls']
});
接下来，每个Dashboard只能有一个数据集
但是，您可以在ChartWrapper上使用view属性
控制哪些列或行应用于图表
ControlWrapper上也提供了view属性
请参阅以下工作代码段，其中包括一个仪表板，一个控件，
和两个图表（每个卡洛斯和乔什一个）
google.charts.load('current', { callback: drawStuff, packages:['corechart', 'controls'] }); function drawStuff() { var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard_div') ); // Combined dataset var data = new google.visualization.arrayToDataTable([ ['Status', 'Carlos', 'Josh'], ['Dual Approved', 5, 1], ['Approved', 7, 10], ['Review', 3, 2], ['Draft', 2, 9], ['Not In', 6, 10], ['Edit Rerun', 1, 3] ]); var programmaticFilter = new google.visualization.ControlWrapper({ controlType: 'CategoryFilter', containerId: 'control_div', options: { filterColumnLabel: 'Status', ui: { labelStacking: 'vertical' } } }); var programmaticChart_Carlos = new google.visualization.ChartWrapper({ chartType: 'PieChart', containerId: 'chart_div_Carlos', options: { width: 290, height: 220, chartArea: {'left': 20, 'top': 20, 'right': 0, 'bottom': 0}, pieSliceText: 'value', pieHole: 0.4, legend: {position: 'left', textStyle: {color: 'black', fontSize: 9, fontName: 'Garamond' }}, pieSliceBorderColor: 'Black' }, view: { columns: [0, 1] } }); programmaticChart_Carlos.setOption('title', 'Carlos'); var programmaticChart_Josh = new google.visualization.ChartWrapper({ chartType: 'PieChart', containerId: 'chart_div_Josh', options: { width: 290, height: 220, chartArea: {'left': 20, 'top': 20, 'right': 0, 'bottom': 0}, pieSliceText: 'value', pieHole: 0.4, legend: {position: 'left', textStyle: {color: 'black', fontSize: 9, fontName: 'Garamond' }}, pieSliceBorderColor: 'Black' }, view: { columns: [0, 2] } }); programmaticChart_Josh.setOption('title', 'Josh'); dashboard.bind( programmaticFilter, [programmaticChart_Carlos, programmaticChart_Josh] ); dashboard.draw(data); }
.ggl-dashboard { border: 1px solid #ccc; } .ggl-control ( min-width: 250px; padding-left: 2em; ) .ggl-chart ( display: inline-block; )
<script src="https://www.gstatic.com/charts/loader.js"></script> <div class="ggl-dashboard" id="dashboard_div"> <div class="ggl-control" id="control_div"></div> <div class="ggl-chart" id="chart_div_Carlos"></div> <div class="ggl-chart" id="chart_div_Josh"></div> </div>
Google Chart Visualization仪表板数据源问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.