数据库-关于想在asp.net网页上实现的一个效果，不知道能否实现出来—

关于想在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。其它另外九个标签也是如此。

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

顺便发上我的后台代码：

编辑于：2018.07.02 05:47 发布于：2018.07.02 01:14

数据库 sql 图片标签 asp.net

| 评论0 | 收藏 | 浏览531 |

: wodeqq584958184

声望： 21

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 05:40

评论 1 |

| 已采纳

: 支付宝加好友偷能量挖

声望： 88410

: 支付宝加好友偷能量挖 不是id记录，应该是id列。。通过id列来更新好点。通过c，a值可能要误更新了; 大约 2 年之前回复

你是什么图表控件，自己看下api支持不支持添加附加按钮，不支持就麻烦了，或者看下是否svg绘图，svg绘图x轴有dom对象，可以通过dom对象来生成对应的按钮

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

发布于：2018.07.02 02:36

评论 10 |

: 支付宝加好友偷能量挖

声望： 88410

: wodeqq584958184 回复showbo: 好的; 大约 2 年之前回复

: 支付宝加好友偷能量挖 回复wodeqq584958184: 看下面的我的示例，改下对应的属性值就可以实现了; 大约 2 年之前回复

: wodeqq584958184 回复showbo: 能实现效果就行，按钮的位置暂时不考虑，可是我现在在想这每个按钮怎么让它识别绑定对应的X轴坐标点的值，因为我这个X轴坐标点的值不是一直固定不变的，有可能其他错误代码类型持续时间更多，数据图就会发生变化，所以我困扰着我不清楚text里该怎么写。。。; 大约 2 年之前回复

: 支付宝加好友偷能量挖 回复wodeqq584958184: 刚才试了下asp.net的图标生成的图片。。你要定位到对应的位置下内搞头了，没详细用过，不懂是否能配置为用svg绘图。。如果你不需要一定定位到对应的x轴坐标点下可以直接在下面生成按钮，text为对应的x坐标点的值，点击后调用方法就行了。; 大约 2 年之前回复

: wodeqq584958184 回复showbo: 按钮不是可以直接在前端页面加吗，你的意思是不知道这个按钮如何与单独的错误代码绑在一块是吗？; 大约 2 年之前回复

: 支付宝加好友偷能量挖 回复wodeqq584958184: 现在是不懂怎么加按钮。。; 大约 2 年之前回复

: 支付宝加好友偷能量挖 回复wodeqq584958184: 540这条记录不是有id，你的按钮生成的时候用自定义属性记录住记录id。点击按钮的事件通过自定义属性获取id后更新就好了。如 protected void Page_Load(object sender, EventArgs e) { btn.Attributes["rid"] = "123"; } protected void btn_Click(object sender, EventArgs e) { string rid = btn.Attributes["rid"]; Response.Write(rid); }; 大约 2 年之前回复

: wodeqq584958184 回复wodeqq584958184: 之前又弄过一个按钮，打错了，不是直接 = =; 大约 2 年之前回复

: wodeqq584958184 直接有弄过一个按钮放在前端，然后在后端连接上数据库，并定义了一个按钮点击On_click事件，之前做这个是点击这个按钮关掉某个SQL server里的触发器，所以我在想就是能不能也像这个例子一样，在十个标签下增加10个按钮，点击这个按钮之后执行类似这样的SQL 语句 “update table5 set [Montime_8:00AM-8:00PM] = '0' ”，但是我现在困扰在这里，因为我现在要更新为0，是根据错误代码类型，而不是整一列字段变为0 。。。所以困扰在这里不知道怎么下手; 大约 2 年之前回复

: wodeqq584958184 我用的是chart控件，VS里的asp.net; 大约 2 年之前回复

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

发布于：2018.07.02 01:48

评论 1 |

: 浮沉与木

声望： 41

: wodeqq584958184 看不到图吗？？、; 大约 2 年之前回复

后台代码：

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;

    }
}

}

发布于：2018.07.02 01:57

评论 0 |