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

我试着用提琴在谷歌图表折线图中创建一个分类过滤器

我得到的错误是： “一个或多个参与者未能绘制（）”& “无效列标签：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);

    }

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

功能绘图图（chartData）{
var data=new google.visualization.DataTable（）；
for（chartData.Columns中的var索引）{
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({
图表类型：“线条图”，
集装箱船：“海图分区”，
数据表：数据，
});
var columnsTable=new google.visualization.DataTable（）；
columnsTable.addColumn（'number'，'colIndex'）；
addColumn（'string'，'colLabel'）；
var initState={
所选值：[]
};
对于（var i=1；i

提供如下数据的C代码：

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

    }

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

[WebMethod]
公共静态图表输出GetChartData（）
{
使用（SqlConnection con=newsqlconnection（ConfigurationManager.ConnectionString[“ConnectionString”].ToString（））
{
SqlCommand cmd=新的SqlCommand（“Usp_Getdata3”，con）；
cmd.CommandType=CommandType.storedProcess；
SqlDataAdapter da=新的SqlDataAdapter（）；
da.SelectCommand=cmd；
DataTable dt=新的DataTable（）；
da.填充（dt）；
List dataList=新列表（）；
foreach（数据行中的数据行）
{
ChartDetails=新的ChartDetails（）；
details.WeekNumber=Convert.ToInt16（dtrow[0]）；
details.DistributorName=dtrow[1].ToString（）；
details.Count=Convert.ToUInt16（dtrow[2]）；
数据列表。添加（详细信息）；
}
ChartOutput=新的ChartOutput（）；
output.Data=新列表（）；
output.Columns=新列表（）；
var orderedListOfDistributorNames=dataList.Select（x=>x.DistributorName）.Distinct（）.OrderBy（x=>x）.ToArray（）；
output.Columns.Add（“周数”）；
output.Columns.AddRange（orderedListOfDistributorNames）；
var weekgroup=dataList.GroupBy（k=>k.WeekNumber，v=>v）；
foreach（变量g在周组中）
{
var n=output.Columns.Count；
int[]数据行=新的int[n]；
var currentWeekNumber=g.键；
dataRow[0]=当前周数；
for（int i=0；ix.DistributorName==DistributorToCheck）；
if（distributorFromGrouping！=null）
dataRow[i+1]=distributorFromGrouping.Count；
}
output.Data.Add（dataRow）；
}
返回输出；
}
}
公共类图表输出
{
公共列表列{get；set；}
公共列表数据{get；set；}
}
公共类图表详细信息
{
公共字符串DistributorName{get；set；}
公共整数周数{get；set；}
公共整数计数{get；set；}
}

首先，这个勇敢的例子不使用仪表板。
每个控件都是单独绘制的

使用仪表板将覆盖图表和控件包装上的数据表定义。
在这里将它们设置为相同的数据表-->

dash.draw（数据）

从而导致-->
列标签无效：colLabel

此外，上的
'statechange'
事件不会向回调函数传递任何参数。

setChartView
的
wrapper
参数将不起作用