[英]Google Pie Chart not displaying in browser
我正在嘗試從外部javascript文件調用drawChart函數。 當我編譯時,屏幕上沒有任何顯示。 我無法確定問題,因為在調試過程中未給出任何錯誤。
js函數中的for循環是否可以訪問對象的變量。 我認為錯誤就在那兒。 我發布了完整的代碼以進行澄清。
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].name, dataValues[i].number]);
}
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">
<title></title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("visualization", "1", { packages: ["corechart"] }); </script>
<script type="text/javascript" src="Test.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript" src="Test.js"></script>
<input type="button" onclick="drawChart('<%=getJsonObj()%>')" value="Draw Pie Chart" />
<div id="piechart" style="width: 900px; height: 500px;"></div>
</div>
</form>
</body>
</html>
Default.aspx.cs
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)
{
}
public string getJsonObj()
{
List<Item> data = new List<Item>();
data.Add(new Item("AAA", 10));
data.Add(new Item("BBB", 20));
data.Add(new Item("CCC", 30));
JavaScriptSerializer jss = new JavaScriptSerializer();
string json = jss.Serialize(data);
return json;
}
}
public class Item
{
public string name = "";
public int number = 0;
public Item(string iName, int iNumber)
{
name = iName;
number = iNumber;
}
}
Test.js
function drawChart(jsonObj) {
var dataValues = eval(jsonObj);
var data = new google.visualization.DataTable(dataValues);
data.addColumn('string', 'NAME');
data.addColumn('number', 'NUMBER');
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].name, dataValues[i].number]);
}
var options = { 'title': 'Pie Chart Example' };
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
有人可以測試此代碼並確定任何問題。 謝謝
這行是不正確的
<input type="button" onclick="drawChart('<%=getJsonObj()%>')" value="Draw Pie Chart" />
查看呈現的源代碼,您會看到JavaScriptSerializer中有很多雙引號。
更改為此:
<input type="button" onclick='drawChart( <%= getJsonObj() %> )' value="Draw Pie Chart" />
然后所有雙引號將嵌套在兩個單引號內
我想您忘記了回調,就像這樣。
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.