Google Chart仪表板多个数据 [英] Google Chart dashboard multiple data
本文介绍了Google Chart仪表板多个数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个Google图表仪表板，其中每个甜甜圈图都有不同的数据，但只有data_2返回，而不是第一个图<div>的data_1和第二个图<div>的data_2. 针对具有不同数据的多图表的源文档需要单独的功能，但是是否有第一个函数drawStuff_1中使用两个数据集的方法?
我最终想要一个仪表板，一个ControlWrapper(一对多)，多个数据集(carlos，josh等)和多个甜甜圈图(<div>代表carlos，<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>
解决方案
首先，setOnLoadCallback每页只能使用一次
，但是这很容易解决，您可以将callback直接包含在load语句
google.charts.load('current', {
callback: drawStuff,
packages:['corechart', 'controls']
});
下一步，每个Dashboard
但是，您可以在ChartWrapper
上使用view属性
以控制将哪些列或行应用于图表
view属性也可以在ControlWrapper
请参阅以下工作片段，其中包括一个仪表板，一个控件，
和两个图表(每个Carlos和Josh一个)
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>
I created a google chart dashboard with different data for each donut chart but only data_2 returns, instead of data_1 for the first chart <div> and data_2 for the second chart <div>. Source document for multi chart w/ different data requires separate functions, but is there a way to use two datasets in the first function drawStuff_1?
I ultimately want one dashboard, one ControlWrapper (one-to-many), multiple data sets (carlos, josh, etc.) and multiple donut charts (<div> for carlos, <div> for josh, whoever else).
<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>
解决方案
first, setOnLoadCallback should only be used once per page
but it's an easy work around, and you can include the callback directly in the load statement
google.charts.load('current', {
callback: drawStuff,
packages:['corechart', 'controls']
});
next, you can only have one dataset per Dashboard
however, you can use the view property on the ChartWrapper
to control which columns, or rows, apply to the chart
the view property is also available on the ControlWrapper
see following working snippet, which includes one dashboard, one control,
and two charts (one for each Carlos and Josh)
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仪表板多个数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
