图表API错误——[一个或多个参与者未能绘制()]
Charts API error -- [one or more participants failed to draw()]
我目前在客户端遇到->[一个或多个参与者未能绘制()]错误。我能够在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/
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 有没有一个javascript图形绘制库可以进行气球树布局
- 使用相同的数据集绘制各种符号
- 使用onclick绘制SVG路径
- Twilio-显示所有连接参与者的远程参与者视频
- 在谷歌地图上绘制位置数据库
- 用chart.js绘制条形图
- “可绘制地图”设置地图选项“纬度-经度”
- 多维数据集网格未在指定的分区中绘制
- 使用谷歌图表在x轴上绘制日期
- 使用fabric.js从矩形区域获取对象,并将该区域绘制到画布上
- 如何在React Native中绘制图形
- 画布中绘制的矩形区域的弹出工具提示
- 如何在OpenLayers中获取动态绘制的多边形的坐标
- 画布:逐像素绘制图像并请求动画帧计时
- D3从嵌套的JSON中绘制第二个圆环图
- 如何用d3.js绘制折线图
- 在WebGL中绘制多个二维图像
- JSXGraph:如何绘制带有箭头和无点标记的矢量
- 图表API错误——[一个或多个参与者未能绘制()]