个人中心
gpt4 book ai didi

javascript - Google 饼图未在浏览器中显示

转载 作者：行者123 更新时间：2023-12-03 11:27:44 24 4
gpt4 key购买 nike

我正在尝试从列表对象填充数据表，然后在饼图中显示结果。由于某种原因，我无法识别饼图未显示在浏览器中(空白页面)。下面是我的代码。有人可以尝试运行此代码并确定错误是什么!...因为我无法确定我是否错了。

默认.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="[{&quot;aString&quot;:&quot;A&quot;,&quot;anInt&quot;:10},{&quot;aString&quot;:&quot;B&quot;,&quot;anInt&quot;:20},{&quot;aString&quot;:&quot;C&quot;,&quot;anInt&quot;:30}]" />
<div id="piechart" style="width: 900px; height: 500px;"></div>

关于javascript - Google 饼图未在浏览器中显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26850681/

24 4 0
文章推荐： javascript - 如何使用 Angular 和 UI Bootstrap 将动态内容添加到选项卡集
文章推荐： rust - 使用特征找不到方法
文章推荐： Rust 解构结构引用与解构结构
文章推荐： javascript - Dojo dijit/form/TimeTextBox 下拉列表的格式设置
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com