Question

我正在使用Google Chart API构建图表。直到现在我绘制图表的所有功能都在首页内。它们工作正常，但我在头版中有很多代码。我正在尝试将java脚本函数绘制到外部java脚本文件中，但是没有绘制任何内容。

我创建了一个演示版，以便于理解和测试。这是我的HTML（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="Test.js"></script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
      google.load("visualization", "1", { packages: ["corechart"] });

//      function drawChart() {

//          var dataValues = eval('<%=getJsonObj()%>')
//          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);
//      }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" onclick="drawChart()" value="Draw Pie Chart" />
        <div id="piechart" style="width: 900px; height: 500px;"></div>
    </div>
    </form>
</body>
</html>

这是我的Code Behind（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;
    }
}

这是外部的js（Test.js）

function drawChart() {

    var dataValues = eval('<%=getJsonObj()%>')
    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);
}

如果我在Default.aspx中使用注释函数，它可以正常工作。但是我想在外部js文件中获取与drawChart相同的结果，所以我最小化了首页中的代码。我需要理解为什么这段代码不起作用以及必须采取哪些措施来使其正常工作。

Answer 1

我对ASP一无所知，但在您加入Google JSAPI之前，我确实看到您包含了Test.js。在Test.js中，您使用JSAPI中定义的类，因此您必须先包含此类，然后在调用函数google.load()之前必须调用drawChart()

Answer 2

反转包含文件的顺序：

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script type="text/javascript" src="Test.js"></script>

然后：

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

应该是

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

所以你的功能应该是这样的：

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);
}

您还可以避免'评估'您的对象并使用JSON.Parse，并使用不显眼的javascript而不是onclick = drawChart

Answer 3

只需添加脚本的路径

即可

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    ...

    <script type="text/javascript" src="path/to/your/script"/></script>
    </body>
</html>

使用外部JS文件将JS与HTML分离

3 个答案: