Javascript 需要将范围滑块绑定到图表

我想知道如何使用谷歌图表在我的图表中添加一个范围/过滤器滑块。我已经阅读了文档，但正如您所看到的，我编写的代码不同。我需要知道在哪里我必须绑定范围滑块来控制仪表板

这是我的密码：

var line_data, line_json, line_chart, rangeSlider;

var lineChartOptions = {
    "backgroundColor": { "fill": "#fff" },
    "width": 800,
    "height": 600,
    "chartArea": { "height": "65%", "width": "80%", "top": "5" },
    "fontName": "samo_sans_regular, arial, sans-seif",
    "legend": { "position": "none" },
    "lineWidth": "2",
    "pointSize": "0",
    "vAxis": { "format": "#%", "textStyle": { "color": "#333", "bold": "true" }, "baselineColor": "#eee", "gridlines": { "color": "#eee", "count": "10" }, "minorGridlines": { "color": "#eee", "count": "1" }},
    "hAxis": { "format": "MMM yy", "textStyle": { "color": "#333", "bold": "true" }, "baselineColor": "#eee", "gridlines": { "color": "#eee" }, "minorGridlines": { "color": "#eee", "count": "10" }, "slantedText": "true", "slantedTextAngle": "90", "viewWindowMode": "pretty" },
    "series": [{ "color": "#62BA8C" }],
    "focusTarget": "category"
};

var rangeSliderOptions = {
    "controlType": "NumberRangeFilter",
    "containerId": "filter"
};

function drawLineChart(el) {
    var $this = $(el);
    console.log($this);
    var aId = $this.attr("data-id");
    var line_json = $.ajax({
        //url: "/umbraco/surface/Master/FetchStrategyGraphData/?distId="+aId,
        url: $this.attr("data-distUrl"),
        dataType: "json",
        async: false
    }).responseText;

    line_data = new google.visualization.DataTable(line_json);            
    line_chart = new google.visualization.LineChart(document.getElementById("chart-" + aId));
    //chart.draw(data, lineChartOptions);
    $("#chart-" + aId).css("opacity", "0");
    setTimeout(function () {
        line_chart.draw(line_data, lineChartOptions, rangeSliderOptions);
        $("#chart-"+aId).css("opacity", "1");
    }, 500);     
}

---

应该是这样的：

function drawLineChart(el) {
    var $this = $(el);
    console.log($this);
    var aId = $this.attr("data-id");
    var line_json = $.ajax({
        //url: "/umbraco/surface/Master/FetchStrategyGraphData/?distId="+aId,
        url: $this.attr("data-distUrl"),
        dataType: "json",
        async: false
    }).responseText;

    line_data = new google.visualization.DataTable(line_json); 

    var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard_div'));

    var chart = new google.visualization.ChartWrapper({
      'chartType': 'LineChart',
      'containerId': "chart-" + aId,
      'options': lineChartOptions
    });

    var control = new google.visualization.ControlWrapper({
      'controlType': 'NumberRangeFilter',
      'containerId': 'filter',
      'options': {filterColumnIndex: 1 }
    });

    dashboard.bind(control, chart);
    dashboard.draw(line_data);

}

---

您需要使用dashboard、chartWrapper和controlWrapper，查看此url的源代码例如：是的，我很清楚这一点。但正如你在我的代码中看到的。我不知道应该在哪里创建函数controlWrapper…谢谢，我会尝试一下！