0
我正在構建一個簡單的儀表板，並且我想實現的目的非常簡單。Google可視化僅在ComboChart的一個欄上應用ChartRangeFilter控件
有一個ComboChart只顯示3個堆積條。
用戶將使用ChartRangeFilter指定一個日期範圍，我希望這些日期對應的行的總和顯示爲一個堆積條。 在同一張圖上，我想顯示另外兩個不在該日期範圍內的堆積條。 它們只是數據表中的特定行。
下面是我工作的相關代碼，但這隻顯示單個堆積條，它是特定日期範圍內所有行的總和。
我不知道如何添加其他兩個，其中chartrangefilter不會影響它們。
請幫忙。
//-------------------------------------
var dashboard = new google.visualization.Dashboard(
document.getElementById('dash'));
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'E');
data.addColumn('number', 'D');
data.addColumn('number', 'O');
//add a bunch of data
//add two rows that are 1 year ahead and 1 year behind all the other data
//these two rows should not be affected by the chart range filter
data.sort([{column: 0}]);
//this intermediate control would be hidden so that the user can only manipulate the date ranges of the
var intermediate_control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'hidden_div',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'ComboChart',
'chartOptions': {
'chartArea': {'width': '90%'},
'hAxis': {'baselineColor': 'none'},
'seriesType': 'bars',
'isStacked': true
},
// Display a single series that shows the closing value of the sales.
// Thus, this view has two columns: the date (axis) and the stock value (line series).
'chartView': {
'columns': [0,1,2,3],
},
// 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
'minRangeSize': 86400000
}
},
// Initial range: 2012-02-09 to 2012-03-20.
'state': {'range': {'start': new Date(today.getFullYear() - 1,0,1), 'end': new Date(today.getFullYear() - 1, 12,31)}}
});
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'rows' : [1],
'ui': {
'chartType': 'ComboChart',
'chartOptions': {
'chartArea': {'width': '90%'},
'hAxis': {'baselineColor': 'none'},
'seriesType': 'bars',
'isStacked': true
},
// Display a single series that shows the closing value of the sales.
// Thus, this view has two columns: the date (axis) and the stock value (line series).
'chartView': {
'columns': [0,
{
'calc' : function(dT, r) {
var res = 0;
for (var i = 0; i < r; i++){
res += dT.getValue(i,1);
}
return res;
},
'type' : 'number',
'label' : 'E'
},
{
'calc' : function(dT, r) {
var res = 0;
for (var i = 0; i < r; i++){
res += dT.getValue(i,2);
}
return res;
},
'type' : 'number',
'label' : 'D'
},
{
'calc' : function(dT, r) {
var res = 0;
for (var i = 0; i < r; i++){
res += dT.getValue(i,3);
}
return res;
},
'type' : 'number',
'label' : 'O'
}
],
},
// 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
'minRangeSize': 86400000
}
},
// Initial range: 2012-02-09 to 2012-03-20.
'state': {'range': {'start': new Date(today.getFullYear() - 1,0,1), 'end': new Date(today.getFullYear() - 1, today.getMonth(), today.getDate())}}
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'chart',
'options': {
// Use the same chart area width as the control for axis alignment.
'chartArea': {'height': '80%', 'width': '70%'},
'hAxis': {'slantedText': false},
'vAxis': {'title' : 'Sales'},
'seriesType': 'bars',
'isStacked': true
},
// Convert the first column from 'date' to 'string'.
'view': {
'columns': [
{
'calc': function(dataTable, rowIndex) {
return dataTable.getFormattedValue(rowIndex, 0) + ' - ' + dataTable.getFormattedValue(dataTable.getNumberOfRows() - 1, 0);//'Last Year YTD';
},
'type': 'string'
},
{
'calc' : function(dT, r) {
var res = 0;
for (var i = 0; i < dT.getNumberOfRows(); i++){
res += dT.getValue(i,1);
}
return res;
},
'type' : 'number',
'label' : 'E'
},
{
'calc' : function(dT, r) {
var res = 0;
for (var i = 0; i < dT.getNumberOfRows(); i++){
res += dT.getValue(i,2);
}
return res;
},
'type' : 'number',
'label' : 'D'
},
{
'calc' : function(dT, r) {
var res = 0;
for (var i = 0; i < dT.getNumberOfRows(); i++){
res += dT.getValue(i,3);
}
return res;
},
'type' : 'number',
'label' : 'O'
},
],
'rows' : [0]
}
});
dashboard.bind(intermediate_control, control);
dashboard.bind(control, chart);
dashboard.draw(data);
console.log(data);
console.log(control);