Javascript 谷歌可视化-ChartRangeFilter解释

我已经实现了一个折线图，它从地理编码地址绘制JSON数据。该图有许多类别，我还实现了一个类别过滤器，效果很好。图表的时间线是从1月到12月，我想让用户能够可视化特定的月份。谷歌可视化适合这个目的，但如果可能的话，我需要有人为我澄清两点

a） 由于我们正在将日期转换为字符串：

var chart = new google.visualization.ChartWrapper

为什么要在

data.addRow

处指定日期对象？另外，在

'type'：'string'

下，

1,2,3,4

代表什么

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

var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Month'）；
data.addColumn（“数字”、“反社会行为”）；
data.addColumn（‘数字’、‘盗窃’）；
data.addColumn（'编号'，'药物'）；
data.addColumn（'数字'，'刑事损害纵火'）；
data.addColumn（'编号'，'其他盗窃'）；
data.addColumn（'number'，'Public Disorder wills'）；
data.addColumn（'数字'，'抢劫'）；
data.addColumn（'number'，'shopplifting'）；
data.addColumn（'编号'，'车辆犯罪'）；
data.addColumn（'数字'，'暴力犯罪'）；
data.addColumn（“数字”、“其他犯罪”）；
data.addRows([
数学地板（（（数学随机（）*1000）+1）/3）、数学地板（（数学随机（）*100）+1）、数学地板（（（数学随机（）*1000）+1）/3）、数学地板（（数学随机（）*1000）+1）/3）、数学地板（（数学随机（）*1000）+1）/3）、数学地板（（数学随机（）*100）+1）、数学地板（（数学随机（）*100）+1）、数学地板（（数学随机（）*1000）/3）、数学地板（（数学随机（）*1000）+1） 数学地板（（数学随机（）*100）+1），数学地板（（数学随机（）*1000）+1）/3]，
数学地板（（（数学随机（）*1000）+1）/3）、数学地板（（数学随机（）*100）+1）、数学地板（（数学随机（）*1000）+1）/3）、数学地板（（数学随机（）*1000）+1）/3）、数学地板（（数学随机（）*1000）+1）/3）、数学地板（（数学随机（）*100）+1）、数学地板（（数学随机（）*100）+1）、数学地板（（数学随机（）*1000）+3）、数学地板（（数学随机（））*1000）+1）/3），数学地板（（数学随机（）*100）+1），数学地板（（数学随机（）*1000）+1）/3）]
]);
var columnsTable=new google.visualization.DataTable（）；
columnsTable.addColumn（'number'，'colIndex'）；
addColumn（'string'，'colLabel'）；
var initState={selectedValues:[]}；
//将列放入此数据表（跳过列0）
对于（var i=1；i

---

我在问题中添加了随机值，因为JSON数据会使代码的长度变大

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'

下面的数字是

视图.columns

数组参数中的其余元素。数组可以获取要引用的基本数据表中列的索引的数字，也可以获取告诉视图如何计算该列中要使用的值的对象。在本例中，数组的第一个元素是将日期转换为字符串的对象，其余元素是数据列的列索引。

谢谢您的回答。现在一切都好了。如果我想对当前的线图使用ChartRangeFilter，我是否必须实现一个新的控制器，比如

new google.visualization.C