0

我有兴趣使用 JavaScript 和 ASP.net 控件为网页制作交互式 3D 饼图。本质上，我想在这里制作图表的交互式版本：https ://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#3D

我希望有 5 个 ASP.net 文本框，用户在其中输入数据然后提交，图表会根据用户输入的内容进行调整。我知道使用带有 JS 的 ASP.net 控件可能不是最有效的方法，但如果有人能分享如何做到这一点，我将不胜感激。我真的不知道从哪里开始。

谢谢你的帮助！

<%@ Page Language="C#"%>

<!DOCTYPE html>

<script runat="server">
    void btn1_Click(object sender, EventArgs e)
    {
        double s = 0.0;
        double b = 0;
        double g = 0.0f;
        double c = 0.0f;
        double h = 0.0f;

        s = double.Parse(txtWork.Text);
        b = double.Parse(txtEat.Text);
        g = double.Parse(txtCommute.Text);
        c = double.Parse(txtWatchTV.Text);
        h = double.Parse(txtSleep.Text);

        double total = s + b + g + c + h;
        if (total != 24)
        {
            lblError.Text = "Warning! A day has 24 hours";
        }
        if (total == 24)
        {
            lblError.Text = string.Empty;
        } 

    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <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() {


            var data = new google.visualization.DataTable()


                // Declare columns
                data.addColumn('string', 'Task');
                data.addColumn('number', 'Hours per day');


                //Declare variables
                var Work = document.getElementById('<%=txtWork.ClientID%>')
                Eat = document.getElementById('<%=txtEat.ClientID%>')
                Commute = document.getElementById('<%=txtCommute.ClientID%>')
                WatchTV = document.getElementById('<%=txtWatchTV.ClientID%>')
                Sleep = document.getElementById('<%=txtSleep.ClientID%>');

                // Add data.
            data.addRows([
              ['Work', parseInt(Work, 10)],
              ['Eat', parseInt(Eat, 10)],
              ['Commute', parseInt(Commute, 10)],
              ['Watch TV', parseInt(WatchTV, 10)],
              ['Sleep', parseInt(Sleep, 10)],
            ]);


            var options = {
                title: 'My Daily Activities',
                is3D: true,
            };

            var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
            chart.draw(data, options);
        }
        ;


    </script>
  </head>
  <body>
      <form id="form1" runat="server">
          <div id="piechart_3d" style="width: 900px; height: 500px;">


          </div>
          <asp:Label ID="lblError" runat="server" Font-Size="X-Large" Font-Bold="true" />

                  <table>
         <tr>
        <td>Work:</td>
        <td><asp:TextBox ID="txtWork" runat="server" ClientIDMode="Static">11</asp:TextBox></td>
        </tr>
        <tr>
        <td>Eat:</td>
        <td><asp:TextBox ID="txtEat" runat="server" ClientIDMode="Static">2</asp:TextBox></td>
        </tr>
        <tr>
        <td>Commute:</td>
        <td><asp:TextBox ID="txtCommute" runat="server" ClientIDMode="Static">2</asp:TextBox></td>
        </tr>
        <tr>
        <td>Watch TV:</td>
        <td><asp:TextBox ID="txtWatchTV" runat="server" ClientIDMode="Static">2</asp:TextBox></td>
        </tr>
        <tr>
        <td>Sleep:</td>
        <td><asp:TextBox ID="txtSleep" runat="server" ClientIDMode="Static">7</asp:TextBox></td>
        </tr>
        </table>
              <br />

              <br />
              <asp:Button ID="btn1" text="Draw 3D PieChart" runat="server"
                  OnClick="btn1_Click" />
     </form>
  </body>
</html>
4

2 回答 2

0

在您的 asp 页面中：

var txtWork = document.getElementById('<%= txtWork.ClientId %>');

//Parse its value like this: 
 var workValue = parseInt(txtWork.value, 10)
于 2013-11-11T02:43:34.190 回答
0

该属性ClientId获取它在浏览器中呈现的 Id。如果您使用Master Page或，它在 asp.net 中会发生变化User Control。

Master Page为什么，因为您可以在和Content Page或 上拥有多个具有相同 ID 的控件User Controls。

asp.net 4.0 及更高版本中有一个新功能ClientId Mode可以防止控件或页面在运行时更改其 id。

  ClientIDMode="Static"

更多详情ClientId http://www.codeproject.com/Articles/34151/ASP-NET-4-0-Client-ID-Feature

于 2013-11-11T04:46:14.743 回答