0

我正在构建一个简单的仪表板，而我想要实现的目标相当简单。

有一个 ComboChart 仅显示 3 个堆叠条形图。

用户将使用 ChartRangeFilter 来指定日期范围，我希望与这些日期对应的行的总和显示为一个堆叠条。在同一张图表上，我想显示其他 2 个不在该日期范围内的堆积条。它们只是数据表中的特定行。

下面是我正在工作的相关代码，但这仅显示单个堆叠条，它是特定日期范围内所有行的总和。

我不知道如何添加其他两个，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);
4

1 回答 1

0

实际上最终以一种hacky方式结束了。让我知道是否有人知道如何以“正确”的方式做到这一点。

我没有将“特殊”行附加到数据表中，并且在图表选项中我这样做了

'view': {
   'columns': [
     {
       'calc': function(dataTable, rowIndex) {
     if (rowIndex == 1) {return 'This Year';} else if (rowIndex == 2) {return 'Last Year';} 
         return dataTable.getFormattedValue(rowIndex, 0) + ' - ' + dataTable.getFormattedValue(dataTable.getNumberOfRows() - 1, 0);//'Last Year YTD';
       },
       'type': 'string'
     }, 
 {
    'calc' : function(dT, r) {
    if (r == 1) {return thisYear[0];} else if (r == 2) {return lastYear[0];}
    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) {
        if (r == 1) {return thisYear[1];} else if (r == 2) {return lastYear[1];}
    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) {
        if (r == 1) {return thisYear[2];} else if (r == 2) {return lastYear[2];}
    var res = 0;
    for (var i = 0; i < dT.getNumberOfRows(); i++){
        res += dT.getValue(i,3);
    }
    return res;
    },
    'type' : 'number',
    'label' : 'O'
 },
 ],
 'rows' : [1, 0, 2]
 }
});

其中 lastYear 和 thisYear 是数据对应于特殊行的数组

于 2013-06-27T14:35:00.280 回答