Google 图表：列标签无效 |类别过滤器作为列选择器

Question

我尝试使用小提琴 Code to use a CategoryFilter as a column selector by Andrew Gallant 在 Google Charts-LineChart 中创建 CategoryFilter。

我得到的错误是： “一个或多个参与者未能绘制（）”＆ "无效的列标签：colLabel"

除了小提琴之外，我从 ASP.NET 中的 SQL 连接获取图表数据。

出了什么问题？

重要的 javascript 函数如下所示：

function drawchart(chartData) {

        var data = new google.visualization.DataTable();
        for (var index in chartData.Columns) {
            data.addColumn('number', chartData.Columns[index]);
        }
        data.addRows(chartData.Data);

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

        var chart = new google.visualization.ChartWrapper({
            chartType: 'LineChart',
            containerId: 'chart_div',
            dataTable: data,
        });

        var columnsTable = new google.visualization.DataTable();

        columnsTable.addColumn('number', 'colIndex');
        columnsTable.addColumn('string', 'colLabel');

        var initState = {
            selectedValues: []
        };

        for (var i = 1; i < data.getNumberOfColumns() ; i++) {
            columnsTable.addRow([i, data.getColumnLabel(i)]);

            initState.selectedValues.push(data.getColumnLabel(i));
        }

        var distributors = new google.visualization.ControlWrapper({
            controlType: 'CategoryFilter',
            containerId: 'distributors_div',
            dataTable: columnsTable,
            options: {
                filterColumnLabel: 'colLabel',
                ui: {
                    label: 'Columns',
                    allowTyping: false,
                    allowMultiple: true,
                    allowNone: false,
                    selectedValuesLayout: 'belowStacked'
                }
            },
            state: initState
        });

        function setChartView(wrapper) {

            wrapper.setOption('height', 720);
            wrapper.setOption('width', 1280);

            var state = distributors.getState();
            var row;
            var view = {
                columns: [0]
            };
            for (var i = 0; i < state.selectedValues.length; i++) {
                row = columnsTable.getFilteredRows([{
                    column: 1,
                    value: state.selectedValues[i]
                }])[0];
                view.columns.push(columnsTable.getValue(row, 0));
            }
            // sort the indices into their original order
            view.columns.sort(function (a, b) {
                return (a - b);
            });
            chart.setView(view);
            chart.draw();
        }



        google.visualization.events.addListener(distributors, 'statechange', setChartView);


        setChartView(chart);

        dash.bind(distributors, chart);
        dash.draw(data);

    }

提供如下数据的 C# 代码：

[WebMethod]
    public static ChartOutput GetChartData()
    {

        using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ToString()))
        {
            SqlCommand cmd = new SqlCommand("Usp_Getdata3", con);
            cmd.CommandType = CommandType.StoredProcedure;
            SqlDataAdapter da = new SqlDataAdapter();
            da.SelectCommand = cmd;
            DataTable dt = new DataTable();
            da.Fill(dt);
            List<ChartDetails> dataList = new List<ChartDetails>();

            foreach (DataRow dtrow in dt.Rows)
            {
                ChartDetails details = new ChartDetails();

                details.WeekNumber = Convert.ToInt16(dtrow[0]);
                details.DistributorName = dtrow[1].ToString();
                details.Count = Convert.ToUInt16(dtrow[2]);

                dataList.Add(details);
            }

            ChartOutput output = new ChartOutput();

            output.Data = new List<int[]>();
            output.Columns = new List<string>();
            var orderedListOfDistributorNames = dataList.Select(x => x.DistributorName).Distinct().OrderBy(x => x).ToArray();


            output.Columns.Add("WeekNumber");
            output.Columns.AddRange(orderedListOfDistributorNames);


            var weekGrouping = dataList.GroupBy(k => k.WeekNumber, v => v);

            foreach (var g in weekGrouping)
            {
                var n = output.Columns.Count;
                int[] dataRow = new int[n];
                var currentWeekNumber = g.Key;

                dataRow[0] = currentWeekNumber;

                for (int i = 0; i < orderedListOfDistributorNames.Count(); i++)
                {
                    var distrtibutorToCheck = orderedListOfDistributorNames[i];

                    var distributorFromGrouping = g.FirstOrDefault(x => x.DistributorName == distrtibutorToCheck);
                    if (distributorFromGrouping != null)
                        dataRow[i + 1] = distributorFromGrouping.Count;

                }

                output.Data.Add(dataRow);
            }

            return output;
        }
    }

    public class ChartOutput
    {
        public List<string> Columns { get; set; }
        public List<int[]> Data { get; set; }
    }

    public class ChartDetails
    {
        public string DistributorName { get; set; }
        public int WeekNumber { get; set; }
        public int Count { get; set; }
    }

Answer 1

首先，Gallant 示例不使用仪表板。
每个控件都是单独绘制的。

使用仪表板将覆盖图表和控件包装器上的 dataTable 定义。
在此处将它们都设置为相同的 DataTable --> dash.draw(data);
从而导致 --> Invalid column label:colLabel

此外，ControlWrapper 上的 'statechange' 事件不会将任何参数传递给回调函数。
从事件调用时，setChartView 的 wrapper 参数将不存在...

最后，虽然问题中没有显示，但我推荐loading Google Charts
使用 loader.js 与 jsapi

由于recent problems，用'current' 替换版本'44'