Google饼图未显示在浏览器中

Question

I'm trying to invoke drawChart function from an external javascript file. 我正在尝试从外部javascript文件调用drawChart函数。 When I compile nothing is shown in screen. 当我编译时，屏幕上没有任何显示。 I cannot identify the issue since no errors are given during debugging. 我无法确定问题，因为在调试过程中未给出任何错误。

Does this for loop in the js function have access to the variables of the object. js函数中的for循环是否可以访问对象的变量。 I think that the error lies somewhere there. 我认为错误就在那儿。 I posted the full codefor clarification. 我发布了完整的代码以进行澄清。

for (var i = 0; i < dataValues.length; i++) {
    data.addRow([dataValues[i].name, dataValues[i].number]);
}

Default.aspx 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 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 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);
}

Can somebody test this code and identify any issues. 有人可以测试此代码并确定任何问题。 Thanks 谢谢

Answer 1

This line is incorrect 这行是不正确的

<input type="button" onclick="drawChart('<%=getJsonObj()%>')" value="Draw Pie Chart" />

Look at the rendered source, you'll see that there are a boat load of double quotes from the JavaScriptSerializer. 查看呈现的源代码，您会看到JavaScriptSerializer中有很多双引号。

Change it to this: 更改为此：

<input type="button" onclick='drawChart( <%= getJsonObj() %> )' value="Draw Pie Chart" />

Then all the double quotes will be nested inside the two single quotes 然后所有双引号将嵌套在两个单引号内

Answer 2

I think you forgot the callback, something like this. 我想您忘记了回调，就像这样。

<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
</script>

Google饼图未显示在浏览器中

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-11-25 22:27:36

解决方案2
0 2014-11-25 22:25:00

Google饼图未显示在浏览器中

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-11-25 22:27:36

解决方案2 0 2014-11-25 22:25:00

解决方案1
1 已采纳 2014-11-25 22:27:36

解决方案2
0 2014-11-25 22:25:00