Javascript 无法在ASP中生成Google仪表图_Javascript_Asp.net_Google Visualization

Javascript 无法在ASP中生成Google仪表图

javascript asp.net google-visualization

Javascript 无法在ASP中生成Google仪表图,javascript,asp.net,google-visualization,Javascript,Asp.net,Google Visualization,我正在尝试根据更改的MTBF值生成仪表图表，但是当我运行webapplication时，我没有看到任何图表，只有按钮。我的方法是正确的。谢谢你的帮助 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace WebApplication1 { pub

我正在尝试根据更改的MTBF值生成仪表图表，但是当我运行webapplication时，我没有看到任何图表，只有按钮。我的方法是正确的。谢谢你的帮助

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public partial class WebForm3 : System.Web.UI.Page
    {



        protected void Page_Load(object sender, EventArgs e)
        {



        }

        protected void Button1_Click(object sender, EventArgs e)
        {


            using (Test_Manager_DatabaseEntities entities = new Test_Manager_DatabaseEntities())
            {


                int TestExecID = Convert.ToInt32(Request.QueryString["ExecutionID"]);
                var execution = entities.TestExecutionDetails.Where(p => p.TestExecutionID == TestExecID).Select(p => p).OrderBy(p => p.StartTime).ToArray();
                var failures = entities.TestExecutionDetails.Select(p => p.Result != "Pass      ").Count();
                var count = entities.TestExecutionDetails.Count();
                var uptime = entities.TestExecutionDetails.Where(p => p.Result == "Pass          ").Select(p => p);
                TimeSpan elapsedDuration = new TimeSpan(0);
                foreach (var p in uptime)
                {

                    elapsedDuration += (p.EndTime.Value - p.StartTime.Value);

                }
                var mtbfdisplay = elapsedDuration.TotalSeconds / failures;


                string str1 = @"

        data = google.visualization.arrayToDataTable([";

                string str2 = @"['Label', 'Value'],['MTBF'," + mtbfdisplay + @"],]);";

                string str3 = @"var options = {
                width: 400, height: 120, redFrom: 90, redTo: 100, yellowFrom: 75, yellowTo: 90, minorTicks: 5
            };


                var chart = new google.visualization.gauge(document.getelementbyid('chart-success'));
                drawchart(data, options);";

                string postData = str1 + str2 + str3;

                Console.WriteLine(postData);


                ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "test", postData, true);

            }


        }
    }
}

.aspx

与文档中的脚本相比，您的脚本存在几个问题：

已跳过加载必要的包

拼写错误

google.visualization.Gauge

constructor

没有函数

drawchart

-大概应该有

图表。draw

我已尝试更正您的脚本，结果如下（不确定这是否是您正在实现的）：

String posttData=@”
data=google.visualization.arrayToDataTable([
['Label'，'Value']，
['Result'，{0}]
]);
变量选项={
宽度：1200，高度：500，红色起始点：90，红色起始点：100，黄色起始点：75，黄色起始点：90，米诺蒂克：5
};
绘制（选项、数据）；“；
load（'visualization'，'1'，{packages:['gauge']}）；
函数绘制（选项、数据）{
var chart=new google.visualization.Gauge（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}

谢谢你，安德烈。我提出的脚本与您的版本非常接近，我在下面的答案中输入了正确的代码。谢谢你花时间和精力。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication1.WebForm3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Label ID="Label2" runat="server" Text="1"></asp:Label>
                <br />
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>

                <asp:HiddenField ID="HiddenField1" runat="server" Value="1" />
                <br />

                <asp:Label ID="Label1" runat="server" Text="1"></asp:Label>
                <br />

                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

                <div id="chart-success"></div>

            </ContentTemplate>


        </asp:UpdatePanel>
    </div>


    </form>
</body>
</html>

string postData = @"
    google.load('visualization', '1', {packages:['gauge']});
    google.setOnLoadCallback(drawGaugeChart );

    function drawGaugeChart() {
        data = google.visualization.arrayToDataTable([['Label', 'Value'],['MTBF'," + mtbfdisplay + @"]]);
        var options = {
            width: 400, height: 120, redFrom: 90, redTo: 100, yellowFrom: 75, yellowTo: 90, minorTicks: 5
        };
        var chart = new google.visualization.Gauge(document.getElementById('chart-success'));
        chart.draw(data, options);
    }";

    String posttData = @"            
                        data = google.visualization.arrayToDataTable([
                                ['Label', 'Value'],
                                ['Result', {0}]                           
                            ]);
                            var options = {
                                width: 1200, height: 500, redFrom: 90, redTo: 100, yellowFrom: 75, yellowTo: 90, minorTicks: 5
                            };

                    draw(options,data);";

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
         <script type="text/javascript">
             google.load('visualization', '1', { packages: ['gauge'] });

             function draw(options, data) {
                 var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
                 chart.draw(data, options);
             }
        </script>