使用 SQL Server 的 Google 图表类别过滤器

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

---

注意：建议不要使用旧的图表库 --> jsapi
根据release notes...

通过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']
});