Question

我正在尝试根据更改的MTBF值生成计量表，但是当我运行Web应用程序时，我看不到任何图表，只看到按钮。我的方法是正确的方向。谢谢你的帮助，

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

<%@ 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>

Answer 1

与文档中的this example相比，您的脚本存在一些问题：

已跳过加载必要的包
拼错google.visualization.Gauge构造函数
无功能drawchart - 可能应该有chart.draw

我试图纠正你的脚本，这是结果（不确定这是否是你正在实现的）：

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

Answer 2

    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>

Google Gauge图表未在ASP中生成

2 个答案: