Google可视化 - 对ChartRangeFilter的解释

Question

我已经实现了一个线图，它绘制了来自地理编码地址的JSON数据。该图有很多类别，我也实施了一个可以正常工作的类别过滤器。图表的时间轴是从1月到12月，我想让用户可以看到特定的月份。谷歌可视化ChartRangeFilter符合这个目的，但有两点我需要有人为我澄清，如果可能的话。

一）由于我们的日期转换为字符串：

var chart = new google.visualization.ChartWrapper 

为什么我们在data.addRow指定日期对象？ 1,2,3,4也代表'type': 'string'下代表什么？

b）我想知道如何将ChartRangeFilter的功能添加到我当前的代码中？我已经有一个类别过滤器的控制器，但我也想用ChartRangeControl来改善它。

这里是我到目前为止的代码的类别过滤器：

var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Month'); 
     data.addColumn('number', 'Anti-Social Behaviour'); 
     data.addColumn('number', 'Burglary'); 
    data.addColumn('number', 'Drugs'); 
     data.addColumn('number', 'Criminal-damage-arson'); 
     data.addColumn('number', 'Other Theft'); 
    data.addColumn('number', 'Public Disorder Weapons'); 
     data.addColumn('number', 'Robbery'); 
     data.addColumn('number', 'Shoplifting'); 
    data.addColumn('number', 'Vehicle Crime'); 
     data.addColumn('number', 'Violent Crime'); 
     data.addColumn('number', 'Other Crime'); 
     data.addRows([ 
     ['January', Math.floor(((Math.random()*1000)+1)/3), Math.floor((Math.random()*100)+1), Math.floor(((Math.random()*1000)+1)/3), Math.floor(((Math.random()*1000)+1)/3), Math.floor(((Math.random()*1000)+1)/3), Math.floor((Math.random()*100)+1), Math.floor((Math.random()*100)+1), Math.floor(((Math.random()*1000)+1)/3), Math.floor(((Math.random()*1000)+1)/3), Math.floor((Math.random()*100)+1), Math.floor(((Math.random()*1000)+1)/3) ], 
     ['February', Math.floor(((Math.random()*1000)+1)/3), Math.floor((Math.random()*100)+1), Math.floor(((Math.random()*1000)+1)/3), Math.floor(((Math.random()*1000)+1)/3), Math.floor(((Math.random()*1000)+1)/3), Math.floor((Math.random()*100)+1), Math.floor((Math.random()*100)+1), Math.floor(((Math.random()*1000)+1)/3), Math.floor(((Math.random()*1000)+1)/3), Math.floor((Math.random()*100)+1), Math.floor(((Math.random()*1000)+1)/3)] 
]); 

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

    var chart = new google.visualization.ChartWrapper({ 
     chartType: 'LineChart', 
     containerId: 'line_div', 
     dataTable: data, 
     options: { 
     title: 'The crime in your area by category', 
     width: 700, 
     height: 300 
    } 
}); 

chart.draw(); 

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

columnFilter.draw(); 

我添加随机值的问题，因为JSON数据会使代码的长度。

Answer 1

ChartRangeFilter的游乐场示例是一个可怕的例子，因为它不必要地使日期复杂化到完全不必要的字符串转换。如果删除ChartWrapper的view参数，示例工作得很好：

var chart = new google.visualization.ChartWrapper({ 
    chartType: 'CandlestickChart', 
    containerId: 'chart', 
    options: { 
     // Use the same chart area width as the control for axis alignment. 
     chartArea: { 
      height: '80%', 
      width: '90%' 
     }, 
     vAxis: { 
      viewWindow: { 
       min: 0, 
       max: 2000 
      } 
     }, 
     legend: { 
      position: 'none' 
     } 
    } 
}); 

直接回答你的问题：

的ChartRangeFilter必须筛选上连续的数据类型列（number，date，datetime， timeofday），所以这就是为什么DataTable的第一列是date类型。如果我正确回忆了API的历史，CandlestickCharts的原始实现不能与连续的域轴类型一起使用，所以日期到字符串的转换对于使图表工作是必要的（尽管我更喜欢这个例子只需使用可以连续轴使用的图表）。

该示例中'type': 'string'以下的数字是view.columns数组参数中的其余元素。该数组可以采用任何数字作为基本DataTable中列的索引来引用，也可以采用告诉视图如何计算要在该列中使用的值的对象。在该示例中，数组的第一个元素是将日期转换为字符串的对象，其余元素是数据列的列索引。