Question

我正试图弄清楚如何使用Google Charts将范围/过滤器滑块添加到我的图表中。我已阅读该文档，但您可以看到我编写的代码不同。我需要知道在哪里绑定范围滑块以控制“仪表板”。

这是我的代码：

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

Answer 1

应该是这样的：

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

}

需要将rangelider绑定到图表

1 个答案: