嗯,我新手在谷歌圖表,IAM擺弄類別過濾器的while.but我沒有帶能夠使其工作,我喜歡如何自定義類別過濾器在谷歌圖表
var data = new google.visualization.DataTable();
data.addColumn("string", "Date");
data.addColumn("number", "Retailer 1");
data.addColumn("number", "Retailer 3");
data.addColumn("number", "Retailer 2");
data.addRows([
["01/12", 160, {v: 208, f: '208'},{v: 320, f: '320'}],
["02/12", 570, {v: 741, f: '741'},{v: 1140, f: '1140'}],
["03/12", 385, {v: 497, f: '497'},{v: 770, f: '770'}],
["04/12", 328, {v: 425, f: '425'},{v: 656, f: '656'}],
["05/12", 445, {v: 577, f: '577'},{v: 890, f: '890'}],
["06/12", 406, {v: 525, f: '525'},{v: 812, f: '812'}],
["07/12", 249, {v: 475, f: '475'},{v: 772, f: '772'}],
]);
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
// put the columns into this data table (skip column 0)
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
}
// you can set individual columns to be the default columns (instead of populating via the loop above) like this:
// initState.selectedValues.push(data.getColumnLabel(4));
var chart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div',
dataTable: data,
options: {
width: 420,
height: 200,
isStacked: true ,
title:'Sum Of Quant Column Labels By Retailers',
colors:['#3366cc','#FF5733','#808080'],
bar: {groupWidth:'40%'},
chartArea:{left:32,width:'70%'},
}
});
var columnFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'colFilter_div',
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
filterColumnIndex: 1,
useFormattedValue: true,
ui: {
label: 'Retailers',
allowTyping: false,
allowMultiple: false,
caption : 'All Retailers',
allowNone: true,
selectedValuesLayout: 'belowStacked'
}
},
state: initState
});
function setChartView() {
var state = columnFilter.getState();
var row;
var view = {
columns: [0]
};
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
view.columns.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
view.columns.sort(function (a, b) {
return (a - b);
});
chart.setView(view);
chart.draw();
}
google.visualization.events.addListener(columnFilter, 'statechange', setChartView);
setChartView();
columnFilter.draw();
方式
這是我的代碼,現在發生了什麼是我無法做出選擇一次選擇所有數據的選項,我爲'所有零售商'添加標題,但它只是一個標題沒有別的,當我選擇「所有零售商」圖表不會修改。
我想要的是當我選擇「所有零售商」時,所有零售商都顯示在圖表中。任何幫助都會爲我帶來好的世界。
謝謝,ANKIT Rauthan
使用選項'allowNone:true'應顯示所有數據,當過濾器中沒有選中任何內容時 - 默認情況下不會有默認的_select all_選項 – WhiteHat
@WhiteHat首先感謝隊友採取interset,我已經在上面寫過我的代碼了.allowNone已經是真的了,但是當我選擇它時顯示「沒有足夠的列來繪製請求的圖表」。你是否知道這個問題到底是什麼。 –
我的意思是當我沒有選擇任何選項,它顯示「沒有足夠的列給出繪製請求的圖表」。我真的不明白,這是什麼問題 –