谷歌图表 - 类别代码过滤器

Question

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

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

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

 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

Answer 2

的CategoryFilter只过滤数据表中的列值，它看起来像你的榜样，你要通过列名来过滤（由您在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)); 
} 

然后，您可以通过这个数据表和状态到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/。