0

私は単純なダッシュボードを作成していますが、達成したいことはかなり単純です。

積み上げ棒グラフが 3 つしか表示されていない ComboChart が 1 つあります。

ユーザーは ChartRangeFilter を使用して日付の範囲を指定します。これらの日付に対応する行の合計を 1 つの積み上げ棒として表示する必要があります。同じチャートに、その日付範囲にない他の 2 つの積み上げ棒グラフを表示したいと考えています。それらは、データ テーブル内の特定の行にすぎません。

以下は私が作業している関連コードですが、これは特定の日付範囲内のすべての行の合計である単一の積み上げ棒グラフのみを表示します。

chartrangefilter が影響しない他の 2 つを追加する方法がわかりません。

助けてください。

//-------------------------------------
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

実際には、これをハックな方法で行うことになりました。これを「正しい」方法で行う方法を誰かが知っているかどうか教えてください。

「特別な」行をデータテーブルに追加せず、チャートオプションでこれを行いました

'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 に答える