Javascript Can'；不要让NumberArrangeFilter在我的谷歌图表中工作

我试图弄明白为什么我的范围过滤器不起作用，或者甚至没有出现在我的图表中。我试图查看谷歌图表文档，但由于某些原因，我不确定我是否用正确的方法来做这件事。我想要的是，您可以通过分类过滤器对数据进行分类，该过滤器工作正常。但我还想过滤范围（滑块），以查看当年的具体数据

这里有一个

HTML

JavaScript

google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawChart);

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Foo');
    data.addColumn('number', 'Bar');
    data.addColumn('number', 'Baz');
    data.addColumn('number', 'Cad');
    data.addRows([
        ['2005',  45, 60, 89, 100],
        ['2006',  155, 50, 79, 24],
        ['2007',  35, 31, 140, 53],
        ['2008',  105, 23, 43, 82],
        ['2009',  120, 56, 21, 67],
        ['2010',  65, 19, 34, 134],
        ['2011',  80, 23, 130, 40],
        ['2012',  70, 140, 83, 90]
    ]);

    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)]);
        // you can comment out this next line if you want to have a default selection other than the whole list
        initState.selectedValues.push(data.getColumnLabel(i));
    }
    // you can set individual columns to be the default columns (instead of populating via the loop above) like this:
    // initState.selectedValues.push(data.getColumnLabel(4));

    var chart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'chart_div',
        dataTable: data,
        options: {
            title: 'Foobar',
            width: 600,
            height: 400
        }
    });

    var columnFilter = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'colFilter_div',
        dataTable: columnsTable,
        options: {
            filterColumnLabel: 'colLabel',
            ui: {
                label: 'Columns',
                allowTyping: false,
                allowMultiple: true,
                allowNone: false,
                selectedValuesLayout: 'belowStacked'
            }
        },
        state: initState
    });

    var rangeFilter = new google.visualization.ControlWrapper({
        controlType: 'NumberRangeFilter',
        containerId: 'rangeFilter_div',
        dataTable: columnsTable,
        options: {
            filterColumnLabel: 'Year',
            ui: {
                showRangeValues: true,
                label: true
            }
        }
    });

    function setChartView () {
        var state = columnFilter.getState();
        var row;
        var view = {
            columns: [0]
        };
        for (var i = 0; i < state.selectedValues.length; i++) {
            row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
            view.columns.push(columnsTable.getValue(row, 0));
        }
        // sort the indices into their original order
        view.columns.sort(function (a, b) {
            return (a - b);
        });
        chart.setView(view);
        chart.draw();
    }
    google.visualization.events.addListener(columnFilter, 'statechange', setChartView);

    setChartView.bind(rangeFilter, chart);
    setChartView();
    columnFilter.draw();

}

google.load（'visualization'，'1'，{packages:['controls']}）；
setOnLoadCallback（drawChart）；
功能图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Year'）；
data.addColumn（'number'，'Foo'）；
data.addColumn（'number'，'Bar'）；
data.addColumn（'number'，'Baz'）；
data.addColumn（'number'，'Cad'）；
data.addRows([
['2005',  45, 60, 89, 100],
['2006',  155, 50, 79, 24],
['2007',  35, 31, 140, 53],
['2008',  105, 23, 43, 82],
['2009',  120, 56, 21, 67],
['2010',  65, 19, 34, 134],
['2011',  80, 23, 130, 40],
['2012',  70, 140, 83, 90]
]);
var columnsTable=new google.visualization.DataTable（）；
columnsTable.addColumn（'number'，'colIndex'）；
addColumn（'string'，'colLabel'）；
var initState={selectedValues:[]}；
//将列放入此数据表（跳过列0）
对于（var i=1；i

您就快到了！唯一的问题是您使用的是

setChartView

而不是仪表板，请查看文档：@juvian，hells yes！我想出来了。英雄联盟

google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawChart);

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Foo');
    data.addColumn('number', 'Bar');
    data.addColumn('number', 'Baz');
    data.addColumn('number', 'Cad');
    data.addRows([
        ['2005',  45, 60, 89, 100],
        ['2006',  155, 50, 79, 24],
        ['2007',  35, 31, 140, 53],
        ['2008',  105, 23, 43, 82],
        ['2009',  120, 56, 21, 67],
        ['2010',  65, 19, 34, 134],
        ['2011',  80, 23, 130, 40],
        ['2012',  70, 140, 83, 90]
    ]);

    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)]);
        // you can comment out this next line if you want to have a default selection other than the whole list
        initState.selectedValues.push(data.getColumnLabel(i));
    }
    // you can set individual columns to be the default columns (instead of populating via the loop above) like this:
    // initState.selectedValues.push(data.getColumnLabel(4));

    var chart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'chart_div',
        dataTable: data,
        options: {
            title: 'Foobar',
            width: 600,
            height: 400
        }
    });

    var columnFilter = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'colFilter_div',
        dataTable: columnsTable,
        options: {
            filterColumnLabel: 'colLabel',
            ui: {
                label: 'Columns',
                allowTyping: false,
                allowMultiple: true,
                allowNone: false,
                selectedValuesLayout: 'belowStacked'
            }
        },
        state: initState
    });

    var rangeFilter = new google.visualization.ControlWrapper({
        controlType: 'NumberRangeFilter',
        containerId: 'rangeFilter_div',
        dataTable: columnsTable,
        options: {
            filterColumnLabel: 'Year',
            ui: {
                showRangeValues: true,
                label: true
            }
        }
    });

    function setChartView () {
        var state = columnFilter.getState();
        var row;
        var view = {
            columns: [0]
        };
        for (var i = 0; i < state.selectedValues.length; i++) {
            row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
            view.columns.push(columnsTable.getValue(row, 0));
        }
        // sort the indices into their original order
        view.columns.sort(function (a, b) {
            return (a - b);
        });
        chart.setView(view);
        chart.draw();
    }
    google.visualization.events.addListener(columnFilter, 'statechange', setChartView);

    setChartView.bind(rangeFilter, chart);
    setChartView();
    columnFilter.draw();

}