图表API错误——[一个或多个参与者未能绘制()]

Charts API error -- [one or more participants failed to draw()]

本文关键字:参与者 绘制 错误 API 图表 一个      更新时间:2023-09-26

我目前在客户端遇到->[一个或多个参与者未能绘制()]错误。我能够在drawvisualization调用中输出数据,因此问题在javascript代码中。我遵循的例子,但我似乎不能弄清楚我可能会出错触发错误。

 function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) {
        if (dataValues.length < 1)
            return;
        var data = new google.visualization.DataTable();
        data.addColumn('string', columnNames.split(',')[0]);
        data.addColumn('string', columnNames.split(',')[1]);
        data.addColumn('number', columnNames.split(',')[2]);
        for (var i = 0; i < dataValues.length; i++) {
            data.addRow([dataValues[i].Type, dataValues[i].PType, dataValues[i].COUNT]);
        }

        var line = new google.visualization.ChartWrapper({
            'chartType': 'ColumnChart',
            'containerId': 'chart1',
            'options': {
                'width': '1200',
                'height': '500',
                'legend': 'none'
            },
            'view': { 'columns': [2, 0] }
        });
       var table = new google.visualization.ChartWrapper({
            'chartType': 'Table',
            'containerId': 'chart2',
            'options': { 'height': '25em', 'width': '80em' }
        });
        var categoryPicker = new google.visualization.ControlWrapper({
            'controlType': 'CategoryFilter',
            'containerId': 'Contorl1',
            'options': {
                'filterColumnLabel': columnNames.split(',')[1],
                'filterColumnIndex': '1',
                'ui': {
                    'label': 'Price'
                }
            }
        });
        new google.visualization.Dashboard(document.getElementById('PieChartExample')).bind([categoryPicker], [line, table]).draw(data);
    }
  </script>
   <div id="PieChartExample">
        <table>
            <tr style='vertical-align: top'>
                <td >
                    <div style="float: left;" id="chart1"></div>    
                </td>
            </tr>
             <tr>
                <td >
                <div style="float: left;" id="chart2"></div>    
                </td>
            </tr>
              <tr>
                <td style='width: 600px'>
                <div style="float: left;" id="control2"></div>   
                </td>
            </tr>
        </table>         
    </div>
服务器端代码:
protected void Page_Load(object sender, EventArgs e)
 {
    if (!IsPostBack)
    {
        JavaScriptSerializer jss = new JavaScriptSerializer();
        ClientScript.RegisterStartupScript(this.GetType(), "TestInitPageScript",
       string.Format("<script type='"text/javascript'">google.load('visualization','1.0',{{'packages':['corechart','controls']}});google.setOnLoadCallback(function(){{drawVisualization({0},'{1}','{2}');}});</script>",
        jss.Serialize(GetData()),
    "Name Example",
     "Type,"));
    }
}
[WebMethod]
public static List<Data3> GetData()
{
    SqlConnection conn = new SqlConnection("##############");
    DataSet ds = new DataSet();
    DataTable dt = new DataTable();
    conn.Open();
    string cmdstr = "SELECT [Type], Cover, COUNT(Cover)  AS 'Total' FROM [dbo].[database_qy] WHERE [Type] in ('bs','as') GROUP BY Cover, [Type] order by Cover";
    SqlCommand cmd = new SqlCommand(cmdstr, conn);
    SqlDataAdapter adp = new SqlDataAdapter(cmd);
    adp.Fill(ds);
    dt = ds.Tables[0];
    List<Data3> dataList = new List<Data3>();
    string cov = "";
    string typ = "";
    int val = 0;
    foreach (DataRow dr in dt.Rows)
    {
        try
        {
            cov = dr[0].ToString();
            typ = dr[1].ToString();
            val = Convert.ToInt32(dr[2]);
        }
        catch
        {
        }
        dataList.Add(new Data3(cov, typ, val));
    }
    return dataList;
}

我也得到返回到drawvisualization调用,如下所示;

    <script type="text/javascript">google.load('visualization','1.0',{'packages':  ['corechart','controls']});google.setOnLoadCallback(function(){drawVisualization([{"Type":"bs","PType":"cv","COUNT":2576},{"Type":"cd","PType":"cv","COUNT":2056},{"Type":"cl","PType":"cv","COUNT":9901},{"Type":"cm","PType":"cv","COUNT":10079},{"Type":"rm","PType":"cv","COUNT":12242},{"Type":"bs","PType":"tk","COUNT":3678},{"Type":"cd","PType":"tk","COUNT":7567},{"Type":"cl","PType":"tk","COUNT":42976},{"Type":"cm","PType":"tk","COUNT":21245},{"Type":"rm","PType":"tk","COUNT":44379},{"Type":"bs","PType":"TRD","COUNT":7},{"Type":"cd","PType":"TRD","COUNT":50},{"Type":"cl","PType":"TRD","COUNT":86},{"Type":"cm","PType":"TRD","COUNT":202},{"Type":"rm","PType":"TRD","COUNT":116}],'Name Example','Type,');});</script></form>

请建议。由于

问题是在line ChartWrapper的观点。您指定的列([2, 0])不起作用,因为列0是"字符串"类型,不能是图表中的数据序列。将其更改为[0, 2],仪表板将绘制。

var line = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'containerId': 'chart1',
    'options': {
        'width': '1200',
        'height': '500',
        'legend': 'none'
    },
    'view': { 'columns': [0, 2] }
});

参见工作示例:http://jsfiddle.net/asgallant/8D64L/