Google图表 - 类别过滤器代码 [英] Google Charts-Code for Category Filter
问题描述
试用了Google图表功能代码。我目前正在尝试创建一个带有类别过滤器的折线图。这是我的代码：
function drawVisualization（）{
//准备数据。
var data = google.visualization.arrayToDataTable（[
['x'，'Cats'，'Blanket 1'，'Blanket 2']，
['A'，1,1 ，0.5]，
['B'，2，0.5，1]，
['C'，4,1,0.5]，
['D'，8,0.5,1 ]，
['E'，7,1,0.5]，
['F'，7,0.5,1]，
['G'，8,1,0.5]
['H'，4,0.5,1]，
['I'，2,1,0.5]，
['J'，3.5,0.5,1] $ b ['K'，3,1,0.5]，
['L'，3.5，0.5，1]，
['M'，1,1,0.5]，
['N'，1，0.5，1]
]）;
//为category列定义类别选择器。
var categoryPicker = new google.visualization.ControlWrapper（{
'controlType'：'CategoryFilter'，
'containerId'：'control1'，
'options'：{
'filterColumnLabel'：'item'，
'ui'：{
'allowTyping'：false，
'allowMultiple'：true，
'selectedValuesLayout'：'belowStacked'
}
}，
//定义初始状态，即初始选择的一组指标
'state'：{'selectedValues'：['Cats'， 'Blanket 1'，'Blanket 2']}
}）;
//定义折线图。
var LineChart = new google.visualization.ChartWrapper（{
'chartType'：Line，
'containerId'：'chart1'，
'options'：{
'width'：500，
'height'：400，
'vAxis'：{maxValue：10}
}
}
//创建仪表板。
var dashboard = new google.visualization.Dashboard（document.getElementById（'dashboard'））。
//配置类别选择器以影响折线图
bind（categoryPicker，LineChart）。
//绘制仪表板
draw（data）;
}
任何人都可以告诉我为什么我的图表不显示在Google Playground中。我知道这是一个简单的错误，但我画的是一个空白。
感谢任何帮助！
CategoryFilter只过滤DataTable列中的值，按列名称（由您在state.selectedValues属性中输入的值指示）进行过滤。为了使CategoryFilter作为一个列选择器，你需要给它一个列的列表，你可以自动创建如下：
var columnsTable = new google.visualization.DataTable（）;
columnsTable.addColumn（'number'，'colIndex'）;
columnTable.addColumn（'string'，'colLabel'）;
var initState = {selectedValues：[]};
//将列放入此数据表（跳过列0）
for（var i = 1; i
initState.selectedValues.push（data.getColumnLabel（i））;然后将此DataTable和状态传递给CategoryFilter构造函数： var columnFilter = new google.visualization.ControlWrapper（{
controlType：'CategoryFilter'，
containerId：'colFilter_div' ，
dataTable：columnsTable，
options：{
filterColumnLabel：'colLabel'，
ui：{
label：'Columns'，
allowTyping：false ，
allowMultiple：true，
selectedValuesLayout：'belowStacked'
}
}，
state：initState
}
您需要为过滤器注册statechange事件处理程序以获取所选列的列表并使用它来构建图表的view.columns参数的列索引列表：
google.visualization.events.addListener columnFilter，'statechange'，function（）{
var state = columnFilter.getState（）;
var row;
var columnIndices = [0];
for（var i = 0; i
columnIndices .push（columnsTable.getValue（row，0））;
}
//将索引按其原始顺序排序
columnIndices.sort（function（a，b）{
return（a - b）;
}）;
chart.setView（{columns：columnIndices}）;
chart.draw（）;
}）;
查看整个事件：http://jsfiddle.net/asgallant/WaUu2/ 。
Was trying out the Google Chart function codes. I'm currently trying to create a line chart with a category filter. Here's my code:
function drawVisualization() {
// Prepare the data.
var data = google.visualization.arrayToDataTable([
['x', 'Cats', 'Blanket 1', 'Blanket 2'],
['A', 1, 1, 0.5],
['B', 2, 0.5, 1],
['C', 4, 1, 0.5],
['D', 8, 0.5, 1],
['E', 7, 1, 0.5],
['F', 7, 0.5, 1],
['G', 8, 1, 0.5],
['H', 4, 0.5, 1],
['I', 2, 1, 0.5],
['J', 3.5, 0.5, 1],
['K', 3, 1, 0.5],
['L', 3.5, 0.5, 1],
['M', 1, 1, 0.5],
['N', 1, 0.5, 1]
]);
// Define a category picker for the 'category' column.
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'item',
'ui': {
'allowTyping': false,
'allowMultiple': true,
'selectedValuesLayout': 'belowStacked'
}
},
// Define an initial state, i.e. a set of metrics to be initially selected.
'state': {'selectedValues': ['Cats', 'Blanket 1', 'Blanket 2']}
});
// Define a line chart.
var LineChart = new google.visualization.ChartWrapper({
'chartType': "Line",
'containerId': 'chart1',
'options': {
'width': 500,
'height': 400,
'vAxis': {maxValue: 10}
}
});
// Create the dashboard.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
// Configure the category picker to affect the line chart
bind(categoryPicker, LineChart).
// Draw the dashboard
draw(data);
}
Can anyone tell me why my graph is not displaying inside the Google Playground. I know it must be a simple mistake, but I'm drawing a blank.
Thanks for any help!
解决方案 The CategoryFilter only filters values in a DataTable column, and it looks like in your example that you want to filter by column name (indicated by the values you entered into the state.selectedValues property). In order to make the CategoryFilter behave as a column selector, you need to give it a list of columns to work on, which you can create automatically like this:
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)]);
initState.selectedValues.push(data.getColumnLabel(i));
}
You then pass this DataTable and state to the CategoryFilter constructor:
var columnFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'colFilter_div',
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
ui: {
label: 'Columns',
allowTyping: false,
allowMultiple: true,
selectedValuesLayout: 'belowStacked'
}
},
state: initState
});
You need to register a "statechange" event handler for the filter to get a list of the selected columns and use that to build a list of column indices for the chart's view.columns parameter:
google.visualization.events.addListener(columnFilter, 'statechange', function () {
var state = columnFilter.getState();
var row;
var columnIndices = [0];
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
columnIndices.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
columnIndices.sort(function (a, b) {
return (a - b);
});
chart.setView({columns: columnIndices});
chart.draw();
});
See the whole thing working here: http://jsfiddle.net/asgallant/WaUu2/.
这篇关于Google图表 - 类别过滤器代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
