需要綁定rangeslider到圖表

我想弄清楚如何使用Google圖表將範圍/過濾器滑塊添加到我的圖表中。我已閱讀文檔，但正如您所看到的，我編寫的代碼不同。我需要知道我必須綁定範圍滑塊來控制「儀表板」。需要綁定rangeslider到圖表

這裏是我的代碼：

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

來源

2014-10-27 maverick

您需要使用的儀表盤，chartWrapper和controlWrapper，查看該網址的例子的源代碼：HTTPS：/ /google-developers.appspot.com/chart/interactive/docs/gallery/controls_0e3713101272a3d977e10579168c2a7c.frame?hl=ja – juvian 2014-10-27 19:24:24

是的，我很清楚這一點。但正如你可以在我的代碼中看到的那樣。我不知道我應該在哪裏創建controlWrapper函數... – maverick 2014-10-28 08:20:09

應該是這樣的：

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

}

來源

2014-10-28 16:46:34 juvian

謝謝，我會試一試！ – maverick 2014-10-29 08:40:20

需要綁定rangeslider到圖表

回答

相關問題