谷歌饼图未显示在浏览器中
本文关键字:浏览器 显示 谷歌 | 更新日期: 2023-09-27 18:29:58
我正试图从List对象填充一个数据表,然后将结果显示在饼图中。由于某种原因,我无法识别饼图没有显示在浏览器中(空白页)。下面是我的代码。有人能试着运行这个代码并识别是错误吗!。。。因为我不能确定我错了。
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart(dataValues) {
var data = new google.visualization.DataTable();
data.AddColumn('string', 'Locality');
data.AddColumn('number', 'Frequency');
for (var i = 0; i < dataValues.length; i++) {
data.AddRow(dataValues[i].aString, dataValues[i].anInt);
}
var options = { 'title': 'Pie Chart Test',
'width': 900,
'height': 500
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
背后的代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
List<Items> dataList = new List<Items>();
dataList.Add(new Items("A", 10));
dataList.Add(new Items("B", 20));
dataList.Add(new Items("C", 30));
JavaScriptSerializer jss = new JavaScriptSerializer();
ClientScript.RegisterStartupScript(this.GetType(), "Test", string.Format("<script type='"text/javascript'">drawVisualization({0});</script>", jss.Serialize(dataList)));
}
}
public class Items
{
public string aString = "";
public int anInt = 0;
public Items(string _aString, int _anInt)
{
aString = _aString;
anInt = _anInt;
}
}
}
谢谢
JavaScript区分大小写。方法名称为.addColumn()
和.addRow()
,但您使用的是.AddColumn()
和.AddRow()
。检查您的JavaScript控制台是否存在错误。你应该找到一条类似undefined is not a function
的消息。
.addRow()
方法将一个数组作为其参数,但您要传入两个标量值。用方括号括起来:data.addRow([dataValues[i].aString, dataValues[i].anInt])
。
您也可能在使用RegisterStartupScript()
时遇到问题。您的启动脚本可能会在可视化包加载完成之前运行。相反,我会将值嵌入页面上的一个隐藏字段中,并从脚本中读取该值。
<asp:HiddenField runat="server" ID="ChartData" />
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
List<Items> dataList = new List<Items>();
dataList.Add(new Items("A", 10));
dataList.Add(new Items("B", 20));
dataList.Add(new Items("C", 30));
JavaScriptSerializer jss = new JavaScriptSerializer();
this.ChartData.Value = jss.Serialize(dataList);
}
}
function drawChart() {
var dataValues = JSON.parse(document.getElementById("<%= ChartData.ClientID %>").value);
// The rest of the function as written
}
应用了所有更改的代码段:
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var dataValues = JSON.parse(document.getElementById("ChartData").value);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Locality');
data.addColumn('number', 'Frequency');
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].aString, dataValues[i].anInt]);
}
var options = { 'title': 'Pie Chart Test',
'width': 900,
'height': 500
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<input type="hidden" id="ChartData" value="[{"aString":"A","anInt":10},{"aString":"B","anInt":20},{"aString":"C","anInt":30}]" />
<div id="piechart" style="width: 900px; height: 500px;"></div>