javascript - ASP.NET 中的多个 Google 图表

标签 javascript jquery asp.net visual-studio google-visualization

大家好，我遇到以下问题: 我需要使用 ASP.NET 连接到 Oracle 数据库并从该数据库获取一些数据。然后我需要在Google Charts中显示这些结果。所以我制作了15个不同的页面，每个页面实际上都会包含一个数据库查询(以图形形式，Google Charts及其表格)。我似乎无法显示数据，总会出现 jquery 错误或类似的错误。我知道 javascript 会转到 Site.Master 页面(这是 head 标签所在的位置)，并且我收到此错误，这可能不是唯一的错误，并且不能解决我的问题，但我无法继续!

Uncaught Error: Container is not defined

编辑:修复了上述错误，但没有数据显示!该表显示“表没有列”，但 SQL 查询是正确的，因此我假设 WebMethod 返回的列表不是 JSON 字符串，或者我不应该返回列表对象(？)

这是我的 Site.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="GoogleCharts_MondialDB.SiteMaster" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %></title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:bundlereference runat="server" path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <!-- κάνουμε load τα google charts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript"> 
        google.load('visualization', '1', { packages: ['corechart', 'table'] });
        google.setOnLoadCallback(drawChart);

    /* φτιάχνουμε για κάθε chart συναρτήσεις
     αυτή η συνάρτηση σε javascript πέρνει τα δεδομένα που πήρε από τη συγκεκριμένη μέθοδο στη C# (που επιστρέφει τα δεδομένα των queries
        της βάσης) και τα στέλνει στη συνάρτηση drawchart από κάτω που με βάση αυτά τα δεδομένα θα φτιάξει τα charts
        και τα tables */

        function drawChart() {
            var jsonData_s2;
            $.ajax({
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                url: 'Simple2.aspx/GetSimple2Data',
                data: '{}',
                success: function (data) {
                    jsonData_s2 = data.d;
                },
                error: function () {
                    alert("Error loading data! Please try again.");
                }
            });
                   var s2 = new google.visualization.DataTable(jsonData_s2);
                    // θέλουμε και table και chart, και τα δυο τα βρισκονται στα αντιστοιχα div
                    var table = new google.visualization.Table(document.getElementById('table_s2'));
                    table.draw(s2, { showRowNumber: true, width: '100%', height: '100%' });
                    var chart = new google.visualization.ColumnChart(document.getElementById('col_s2'));
                    chart.draw(s2,
                      {
                          title: "Απλό Ερώτημα 2",
                          position: "top",
                          fontsize: "14px",
                          chartArea: { width: '50%' },
                      });
                    var jsonData_s4;
                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        contentType: 'application/json',
                        url: 'Simple4.aspx/GetSimple4Data',
                        data: '{}',
                        success: function (data) {
                            jsonData_s4 = data.d;
                        },
                        error: function () {
                            alert("Error loading data! Please try again.");
                        }
                    });
            var data = new google.visualization.DataTable(jsonData_s4);
            // θέλουμε και table και chart, και τα δυο τα βρισκονται στα αντιστοιχα div
            var table = new google.visualization.Table(document.getElementById('table_s4'));
            table.draw(data, { showRowNumber: true, width: '100%', height: '100%' });
            var chart = new google.visualization.PieChart(document.getElementById('pie_s4'));
            chart.draw(data,
              {
                  title: "Απλό Ερώτημα 4",
                  position: "top",
                  fontsize: "14px",
                  chartArea: { width: '50%' },
              });
            $.ajax({
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                url: 'Simple6.aspx/GetSimple4Data',
                data: '{}',
                success: function (data) {
                    jsonData = data.d;
                },
                error: function () {
                    alert("Error loading data! Please try again.");
                }
            });
            var data = new google.visualization.DataTable(jsonData_s6);
            // θέλουμε και table και chart, και τα δυο τα βρισκονται στα αντιστοιχα div
            var table = new google.visualization.Table(document.getElementById('table_s6'));
            table.draw(data, { showRowNumber: true, width: '100%', height: '100%' });
            var chart = new google.visualization.ColumnChart(document.getElementById('col_s6'));
            chart.draw(data,
              {
                  title: "Απλό Ερώτημα 6",
                  position: "top",
                  fontsize: "14px",
                  chartArea: { width: '50%' },
              });
        }
    </script>  
</head>
<body>
    <form runat="server" style="background-color: #0099FF">
        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>

        <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" Font-Size="Large" StaticSelectedStyle-Font-Bold="true"> 
            <Items>
                <asp:MenuItem Text="Simple2" NavigateUrl="~/Simple2.aspx"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/Simple4.aspx" Text="Simple4" Value="Simple4"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/Simple6.aspx" Text="Simple6" Value="Simple6"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/Simple8.aspx" Text="Simple8" Value="Simple8"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/Simple10.aspx" Text="Simple10" Value="Simple10"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/Simple12.aspx" Text="Simple12" Value="Simple12"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/Hard2.aspx" Text="Hard2" Value="Hard2"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/Hard4.aspx" Text="Hard4" Value="Hard4"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/Hard6.aspx" Text="Hard6" Value="Hard6"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/Hard8.aspx" Text="Hard8" Value="Hard8"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/Hard10.aspx" Text="Hard10" Value="Hard10"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/Hard12.aspx" Text="Hard12" Value="Hard12"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/Hard14.aspx" Text="Hard14" Value="Hard14"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/Hard16.aspx" Text="Hard16" Value="Hard16"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/Hard18.aspx" Text="Hard18" Value="Hard18"></asp:MenuItem>
            </Items>
        </asp:Menu>

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    &nbsp;</div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a runat="server" href="~/">Home</a></li>
                        <li><a runat="server" href="~/About">About</a></li>
                    </ul>
                    <asp:LoginView runat="server" ViewStateMode="Disabled">
                        <AnonymousTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <!-- <li><a runat="server" href="~/Account/Register">Register</a></li>
                                <li><a runat="server" href="~/Account/Login">Log in</a></li> -->
                            </ul>
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %> !</a></li>
                                <li>
                                    <!--<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" /> -->
                                </li>
                            </ul>
                        </LoggedInTemplate>
                    </asp:LoginView>
                </div>
            </div>
        </div>
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>&nbsp;</p>
            </footer>
        </div>
    </form>
</body>
</html>

在这个母版页中，我为需要谷歌图表的三个页面进行了工作。 所有教程都用一个图表制作谷歌图表，所以我认为这是在页面上添加许多图表的方法。接下来是第一页的 asp.net 文件，然后是后面的 C# 代码。我使用所有教程中描述的 webmethod。

Simple2.aspx

%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Simple2.aspx.cs" Inherits="GoogleCharts_MondialDB._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <span style="font-size: 29pt; color: #FFFFFF"><strong>ΟΠΤΙΚΟΠΟΙΗΣΗ ΔΕΔΟΜΕΝΩΝ ΤΗΣ MONDIAL DATABASE ΜΕ ΧΡΗΣΗ GOOGLE CHARTS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </strong></span><img src="GDlogo2.png" id="gdlogo" alt="Google Developers Logo" /><hr />

    <div class="row">
            <h2 style="color: #FFFFFF">ΜΕΡΟΣ Ι) ΑΠΛΑ ΕΡΩΤΗΜΑΤΑ (ΖΥΓΟΣ ΑΡΙΘΜΟΣ)</h2> <hr />
            <p style="color: #FFFFFF">2. Να βρεθούν οι ποταμοί, οι λίμνες εκβολής και το μήκος των ποταμών μου εκβάλλουν μόνο σε λίμνες (όχι θάλασσα).</p>
            <div id="col_s2" style="width:300px;height:300px">
                <!-- Εδώ θα φορτώσει το chart -->
            </div>
             <div id="table_s2" style="width:300px;height:300px">
                <!-- Εδώ θα φορτώσει το table -->
            </div>
        </div>
</asp:Content>

Simple2.aspx.cs

using System;
using System.Collections.Generic;
using System.Web.UI;
using System.Web.UI.WebControls;
using Oracle.DataAccess.Client;
using System.Data;
using System.Web.Services;

namespace GoogleCharts_MondialDB
{
    public class Simple2Data
    {
        public String river = "";
        public String lake = "";
        public float river_len = 0;

        public Simple2Data(String s1, float f1, String s2)
        {
            river = s1;
            lake = s2;
            river_len = f1;
        }
        [WebMethod]
        public static List<Simple2Data> GetSimple2Data()
        {
            String oradb = "DATA SOURCE=localhost:1521/XE;USER ID=SYSTEM";
            OracleConnection conn = new OracleConnection(oradb);
            conn.Open();
            string cmdstr = "SELECT RIVER.NAME, RIVER.LENGTH, LAKE.NAME FROM RIVER, LAKE, RIVERTHROUGH WHERE RIVER.NAME = RIVERTHROUGH.RIVER AND LAKE.NAME = RIVERTHROUGH.LAKE AND RIVER.SEA IS NULL";
            OracleCommand cmd = new OracleCommand(cmdstr, conn);
            List<Simple2Data> dataList = new List<Simple2Data>();
            String river = "";
            String lake = "";
            float river_len = 0;
            OracleDataReader dr = cmd.ExecuteReader();
            while (dr.HasRows)
            {
                dr.Read();
                river = dr.GetString(0);
                river_len = dr.GetFloat(1);
                lake = dr.GetString(2);
                dataList.Add(new Simple2Data(river, river_len, lake));

            }
            //conn.Close();
            //conn.Dispose();
            return dataList;
        }
    }

    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

    }
}

查询没有问题，它们已经过测试并且可以工作，我不知道如何在谷歌图表中显示数据。 谢谢

最佳答案

错误:容器未定义来自谷歌图表。
它指的是图表应分配给的 HTML 元素...
显然，它找不到容器。

尝试像这样加载 google，等待 DOM 首先加载...

window.addEventListener('load', loadGoogle, false);

function loadGoogle() {
  google.load('visualization', '1', {packages:['corechart', 'table'], callback: drawChart});
}

关于javascript - ASP.NET 中的多个 Google 图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34947822/

上一篇：javascript - 无法让 Annyang.js 库正常工作

下一篇：javascript - 如何刷新 ui-grid 中的一行？

相关文章：

jquery - 我的代码行之间的空间 - JQuery 和 CSS

javascript - 我想将 ajax 响应数据加载到下拉列表中

javascript - 数据表状态保存多个输入

c# - 如何将上传的图片保存到数据库中？

javascript - HTML 文档中的滚动位置 - 如何确定

javascript - 如何使用node.js计算最大数量？

javascript - 用于验证具有多个条件的字符串的正则表达式模式

Javascript 在点击时显示元素

asp.net - 使用 HTTP 处理程序中的 ASP.NET 资源文件

c# - 带有 jQ​​uery DatePicker 的 ASP.NET

©2024 IT工具网  联系我们