嗯，我是谷歌排行榜的新手，我玩了类别过滤器一段时间。但我无法让它工作，我喜欢的方式
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();
这是我的代码，现在发生的事情是我无法一次性选择所有数据的选项，我为'All Retailers'添加了一个标题，但它只是一个标题没有别的，当我选择“所有零售商”图表不会修改。
我想要的只是当我选择“所有零售商”时，所有零售商都会在图表中显示。任何帮助都会为我做好事。
谢谢，Ankit Rauthan
答案 0 :(得分：0)
因为过滤器用于选择要显示的列，所以
如果未选择任何内容，则只会将一列[0]传递给view
这导致图表上的错误
柱形图需要至少绘制两列......
问题从此处开始，如果未选择任何内容，则不会向view添加其他列...
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));
}
要更正此问题，请在未选择任何内容时删除view，
这将导致图表显示所有列...
if (state.selectedValues.length > 0) {
chart.setView(view);
} else {
chart.setView(null);
}
请参阅以下工作代码段...
google.charts.load('current', {
callback: drawChart,
packages: ['controls', 'corechart']
});
function drawChart() {
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);
});
if (state.selectedValues.length > 0) {
chart.setView(view);
} else {
chart.setView(null);
}
chart.draw();
}
google.visualization.events.addListener(columnFilter, 'statechange', setChartView);
setChartView();
columnFilter.draw();
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="colFilter_div"></div>