Question

正在试用Google Chart功能代码。我目前正在尝试使用类别过滤器创建折线图。这是我的代码：

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

任何人都可以告诉我为什么我的图表没有在Google Playground中显示。我知道这一定是一个简单的错误，但我正在画一个空白。

感谢您的帮助！

Answer 1

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

然后将此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 < 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();
});

在此处查看完整的内容：http://jsfiddle.net/asgallant/WaUu2/。

Answer 2

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

        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
            }
        },

以下是类别过滤器jqfaq.com

的工作示例

Google图表 - 类别过滤器代码

2 个答案: