Google 차트 - 카테고리 코드 필터

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 놀이터에 표시되지 않는 이유는 누구에게 말해 줄 수 있습니까? 나는 그것이 단순한 실수 일 것임에 틀림 없다. 그러나 나는 공백을 그리고있다.

도움 주셔서 감사합니다.

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

당신은 다음 CategoryFilter이이 DataTable에와 국가 통과 생성자 : 선택한 열 목록을 얻기 위해 필터의 "하여 stateChange"이벤트 핸들러를 등록하고 차트의 view.columns 매개 변수에 대한 컬럼 인덱스의 목록을 작성하는 것을 사용할 필요가

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

:

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/.