Question

我目前正在体验 - ＆gt; [一个或多个参与者未能在客户端绘制（）]错误。我能够在drawVisualisation调用中获取数据输出，因此问题在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;
}

我也回到了drawVisualisation调用，如下所示;

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

请指教。感谢

Answer 1

问题出在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/

图表API错误 - [一个或多个参与者无法绘制（）]

1 个答案: