谷歌图表:无效的列标签 |类别筛选器作为列选择器

我尝试使用小提琴代码将CategoryFilter用作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; }
    }