Debugging 谷歌图表分类过滤器代码

正在试用谷歌图表的功能代码。我目前正在尝试创建带有类别过滤器的折线图。这是我的密码：

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);
}

有人能告诉我为什么我的图表没有显示在谷歌游乐场里吗。我知道这一定是一个简单的错误，但我正在画一个空白

谢谢你的帮助！ ​

希望这对你有帮助。 示例代码：

        var categoryPicker = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'BrandName',
        options: {
            filterColumnIndex: 3, // filter by brand name
            ui: {
                caption: 'Choose a brand',
                sortValues: true,
                allowNone: true,
                allowMultiple: false,
                allowTyping: true
            }
        },  

---

下面是category filter的工作示例CategoryFilter仅过滤DataTable列中的值，在您的示例中，您希望按列名进行过滤（由在state.selectedValues属性中输入的值指示）。为了使CategoryFilter起到列选择器的作用，您需要为其提供一个要处理的列列表，您可以这样自动创建：

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));
}

您需要为筛选器注册“statechange”事件处理程序，以获取所选列的列表，并使用该列表为图表的view.columns参数构建列索引列表：

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();
});

google.visualization.events.addListener（columnFilter，'statechange'，function（）{
var state=columnFilter.getState（）；
var行；
var指数=[0]；
对于（变量i=0；i

---

看看这里的一切：。

这太棒了。我已经看到了JSFIDLE，并试图弄清楚它背后的概念，但始终无法做到。如此简单却如此有效！老实说，我无法表达我是多么高兴，你参加了这么多@jmac，很高兴为您服务>；o）

corechart

似乎缺失：

google.load（'visualization'，'1'，{packages:['corechart'，'controls']}）自从我写了关于这个主题的大部分答案以来，可视化API在过去的7年里可能已经发生了很大的变化。如果东西坏了，我一点也不会感到惊讶。
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();
});