wodeqq584958184
2018-07-02 01:14
采纳率: 77.8%
浏览 556

关于想在asp.net网页上实现的一个效果,不知道能否实现出来

如题,现在我做了一个asp.net的网页效果图,是这样的
图片说明

里面的数据,都是从SQL server里的数据库中的table5调用显示出来的,这个数据图显示的是table5中的Montime-8:00AM-8:00PM字段前十个错误代码持续时间最多的,(X轴下的那些sta010-2、sta010-3、sta010-5等等这些是错误代码类型)

Table5数据表的结构
图片说明

现在我想加一个效果,就是在asp.net每个X轴标签下
图片说明

增加一个按钮,点击这个按钮时,就把与X轴标签值对应的错误代码类型的Montime-8:00AM-8:00PM字段下的值更新为0

打个比方:现在根据柱状图显示,sta010-2这个错误代码类型,他的Montime-8:00-8:00PM字段下的值是540,然后点击这个按钮之后,这个sta010-2的Montime-8:00-8:00PM字段下的值更新变为0。其它另外九个标签也是如此。

请问这个效果能实现出来吗,如果能,效果该怎么实现出来??

顺便发上我的后台代码:

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

6条回答 默认 最新

  • 已采纳

    帮你写个简单demo,定位到x周坐标点下没办法,不过x轴坐标间距一样而且不变的话,你可以用css调整按钮列的位置也是可以的

     <%@ Page Language="C#" AutoEventWireup="true"  %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            for (int i = 0; i < 10; i++)
            /*这个遍历的代码可以放到你对应的下面的代码内,Button的text改为对应的值 Count1[i],id改为记录的id,你返回的数据需要多返回ID记录
            如果没有办法返回id记录,通过c,a的值来做为条件清空对应记录值也行,但是可能会清空多条
        for (int i = 0; i < 10; i++)
                        {
    
                            Count2[i] = Convert.ToDouble(dt.Rows[i]["AM"]);
                            Count1[i] = dt.Rows[i]["c"].ToString() + "——" + dt.Rows[i]["a"].ToString();// +dt.Rows[i]["d"].ToString();*/
            {
                Button btn = new Button();
                btn.ID = i.ToString();
                btn.Text = "btn" + i;
                btn.Click += Btn_Click;
                plBtns.Controls.Add(btn);
            }
        }
        protected void Btn_Click(object sender, EventArgs e)
        {
            Button btn = (Button)sender;
            string id = btn.ID, text = btn.Text;
            //或者通过text拆分得到c==arr[0],a==arr[1]的值,通过这2个值更新数据库
            string[] arr = text.Split(new string[] { "——"}, StringSplitOptions.RemoveEmptyEntries);
            Response.Write(id); 
        }
    </script>
    <html>
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            图标
        <asp:Panel runat="server" ID="plBtns"></asp:Panel>
        </form>
    </body>
    </html>
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • 浮沉与木 2018-07-02 01:48

    你的图片都查看不了,后台代码也没发。

    评论
    解决 无用
    打赏 举报
  • wodeqq584958184 2018-07-02 01:57

    后台代码:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using System.Data.SqlClient;
    using System.Configuration;
    using System.Drawing;
    using System.Drawing.Drawing2D;
    using System.Web.UI.DataVisualization.Charting;

    namespace zhu
    {
    public partial class Monday1 : System.Web.UI.Page
    {
    public SqlConnection SqlConnString;

        string[] Count1 = new string[10];
        double[] Count2 = new double[10];
        string[] Count5 = new string[255];
    
        protected void Page_Load(object sender, EventArgs e)
        {
    
            DataSet ds = new DataSet();
    
            string vOutParam = "";
            //载入SQL server的查询存储过程
            ds = ExeProcDT1("Searchtable1_1", "", ref vOutParam);
            if (ds.Tables.Count > 0)
            {
                DataTable dt = new DataTable();
                dt = ds.Tables[0];
                if (dt.Rows.Count > 0)
                {
                    for (int i = 0; i < 10; i++)
                    {
    
                        Count2[i] = Convert.ToDouble(dt.Rows[i]["AM"]);
                        Count1[i] = dt.Rows[i]["c"].ToString() + "——" + dt.Rows[i]["a"].ToString();// +dt.Rows[i]["d"].ToString();
                        Count5[i] = dt.Rows[i]["d"].ToString();
                        //Chart1.Series[0].ToolTip = dt.Rows[i]["d"].ToString();
                        //Chart1.Series[0].Points[i + 1].ToolTip = dt.Rows[i]["d"].ToString();
                        //Chart1.Series[0].Points[0].ToolTip = "wen"; 
                       // System.Web.UI.DataVisualization.Charting.DataPoint point=new DataPoint();
                        //point.ToolTip=dt.Rows[i]["d"].ToString();
                        //赋值
                        //Chart1.Series[0].Points.Add(point);
                    }
                    Chart1.Series[0].Points.DataBindXY(Count1, Count2);//初始化数据
                    for (int i = 0; i < 10; i++)
                    {
                        Chart1.Series[0].Points[i].ToolTip = dt.Rows[i]["d"].ToString();
                    }
                }
    
            }
            zhuzhaugntu(Count1, Count2);
    
            //Chart1.Series[0].ToolTip = "X轴:#VAL\n";
    
    
        }
    
        //柱状图图形的设置
        private void zhuzhaugntu(string[] a, double[] b)
        {
    
            Chart1.ChartAreas[0].BackColor = Color.Black;//设置背景为黑色
            Chart1.ChartAreas[0].Area3DStyle.PointGapDepth = 10;//x轴行间距
            Chart1.ChartAreas[0].AxisY.MajorGrid.LineDashStyle = ChartDashStyle.Dash;//需线
            Chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.Yellow;//需线颜色
            Chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;//关掉竖线1
            //根据水尺最高值设置Y轴间距
    
            Chart1.ChartAreas[0].AxisY.Maximum = 50000;
            Chart1.Series[0].Label = "#VAL";//设置标签文本 (在设计期通过属性窗口编辑更直观)
            Chart1.Series[0].IsValueShownAsLabel = true;//显示标签
            Chart1.ChartAreas[0].AxisX.LabelStyle.ForeColor = Color.Blue;
            Chart1.ChartAreas[0].AxisX.LabelAutoFitMaxFontSize = 12;
            Chart1.ChartAreas[0].AxisY.LabelAutoFitMaxFontSize = 15;
            Chart1.ChartAreas[0].AxisY.LabelStyle.ForeColor = Color.Red;
    
    
    
    
            //Chart1.Series[0].Points.DataBindXY(a, b);//初始化数据
           // Chart1.Series[0].Points[0].ToolTip = dt.Rows[i]["d"].ToString(); 
            /*Chart1.Series[1].Label = "#VAL";
            Chart1.Series[1].IsValueShownAsLabel = true;
            Chart1.ChartAreas[0].AxisX2.LabelStyle.ForeColor = Color.Blue;
            Chart1.ChartAreas[0].AxisX2.LabelAutoFitMaxFontSize = 12;
            Chart1.Series[0].Points.DataBindXY(c);*/
        }
    
        //连接数据库
        //private SqlConnection GetConnect()
        //{
        //    string strSqlSqlConn = "Data Source=.;Initial Catalog=plc;" +
        //        "Persist Security Info=True;User ID=Jerome;Password=123456";
        //    SqlConnection sqlConnString = new SqlConnection(strSqlSqlConn);
        //    sqlConnString.Open();
        //    return sqlConnString;
        //}
        /// <summary>
        /// 执行单入存过带多个表
        /// </summary>
        /// <param name="procName">存储过程名称</param>
        /// <param name="vInParam">输入参数</param>
        /// <param name="vOutParam">输出参数</param>
        /// <returns></returns>
        public DataSet ExeProcDT1(string procName, string vInParam, ref string vOutParam)
        {
                SqlConnection sqlConnString50 = ZhuSqlConnect.GetConnect();
                SqlCommand SqlCmd = new SqlCommand(procName, sqlConnString50);
                SqlCmd.CommandType = CommandType.StoredProcedure;
                SqlCmd.Parameters.Add("@inparam", SqlDbType.VarChar, 1000).Value = vInParam;
                SqlCmd.Parameters.Add("@outparam", SqlDbType.VarChar, 1024).Direction = ParameterDirection.Output;
                SqlDataAdapter SqlDa = new SqlDataAdapter(SqlCmd);
    
                DataSet DS = new DataSet();
                SqlDa.Fill(DS);
                vOutParam = SqlCmd.Parameters["@outparam"].Value.ToString();
                return DS;
    
        }
    }
    

    }

    评论
    解决 无用
    打赏 举报
  • wodeqq584958184 2018-07-02 01:59

    不知道我说的按钮效果能不能实现出来。。。 有大神或者导师帮我了解一哈吗??

    评论
    解决 无用
    打赏 举报
  • 你是什么图表控件,自己看下api支持不支持添加附加按钮,不支持就麻烦了,或者看下是否svg绘图,svg绘图x轴有dom对象,可以通过dom对象来生成对应的按钮

    如果是canvas就没搞头了,只能看图表是否支持你这种要求的设置。或者直接点击错误号的文本执行ajax操作,发送错误到到服务器进行数据库更新

    评论
    解决 无用
    打赏 举报
  • qq_26714397 2018-07-02 07:13

    推荐一个插件给你 应该能满足你的需求。 Echart

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题