Question

我正在尝试创建一个允许过滤图表的下拉过滤器。我的webmethod正在工作（我已经使用图表测试了它）但是我的ajax没有返回下拉列表中的任何行。

任何帮助真的很感激

<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawCountryChart);
    google.setOnLoadCallback(drawDivisionChart);

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

    function drawCountryChart() {

        $.ajax({
            type: "POST",
            url: "Season.aspx/GetCountry",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var CountryData = google.visualization.arrayToDataTable(r.d);
                var namePicker = new google.visualization.ControlWrapper({
                    'controlType': 'CategoryFilter',
                    'containerId': 'ddlCountry',
                    'options': {
                        'filterColumnLabel': 'CountryName',
                        'ui': {
                            'labelStacking': 'vertical',
                            'allowTyping': false,
                            'allowMultiple': false
                        }
                    }
                });
    }

Answer 1

如果你只是想自己画出滤镜，
需要分配数据表属性并调用draw方法...

var CountryData = google.visualization.arrayToDataTable(r.d);
var namePicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'ddlCountry',
    'dataTable': CountryData,  // <-- assign data table
    'options': {
        'filterColumnLabel': 'CountryName',
        'ui': {
            'labelStacking': 'vertical',
            'allowTyping': false,
            'allowMultiple': false
        }
    }
});
namePicker.draw();  // <-- draw control

注意：使用较旧的图表库推荐不 - ＆gt; jsapi
根据{{3}} ...

通过jsapi加载程序保留的Google图表版本不再一致更新。请从现在开始使用新的gstatic loader.js。

<script src="https://www.gstatic.com/charts/loader.js"></script>

这只会影响load和callback声明，
事实上，callback可以直接添加到load语句中......

google.charts.load('current', {
  callback: function () {
    drawCountryChart();
    drawDivisionChart();
  },
  packages:['corechart', 'controls']
});

Google Charts类别使用SQL Server过滤

1 个答案: