关于想在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>
showbo
支付宝加好友偷能量挖 不是id记录,应该是id列。。通过id列来更新好点。通过c,a值可能要误更新了
大约 2 年之前 回复

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

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

wodeqq584958184
wodeqq584958184 回复showbo: 好的
大约 2 年之前 回复
showbo
支付宝加好友偷能量挖 回复wodeqq584958184: 看下面的我的示例,改下对应的属性值就可以实现了
大约 2 年之前 回复
wodeqq584958184
wodeqq584958184 回复showbo: 能实现效果就行,按钮的位置暂时不考虑,可是我现在在想这 每个按钮怎么让它识别绑定对应的X轴坐标点的值,因为我这个X轴坐标点的值不是一直固定不变的,有可能其他错误代码类型持续时间更多,数据图就会发生变化,所以我困扰着我不清楚text里该怎么写。。。
大约 2 年之前 回复
showbo
支付宝加好友偷能量挖 回复wodeqq584958184: 刚才试了下asp.net的图标生成的图片。。你要定位到对应的位置下内搞头了,没详细用过,不懂是否能配置为用svg绘图。。如果你不需要一定定位到对应的x轴坐标点下可以直接在下面生成按钮,text为对应的x坐标点的值,点击后调用方法就行了。
大约 2 年之前 回复
wodeqq584958184
wodeqq584958184 回复showbo: 按钮不是可以直接在前端页面加吗,你的意思是不知道这个按钮如何与单独的错误代码绑在一块是吗?
大约 2 年之前 回复
showbo
支付宝加好友偷能量挖 回复wodeqq584958184: 现在是不懂怎么加按钮。。
大约 2 年之前 回复
showbo
支付宝加好友偷能量挖 回复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 回复wodeqq584958184: 之前又弄过一个按钮,打错了,不是直接 = =
大约 2 年之前 回复
wodeqq584958184
wodeqq584958184 直接有弄过一个按钮放在前端,然后在后端连接上数据库,并定义了一个按钮点击On_click事件,之前做这个是点击这个按钮关掉某个SQL server里的触发器,所以我在想就是能不能也像这个例子一样,在十个标签下增加10个按钮,点击这个按钮之后执行类似这样的SQL 语句 “update table5 set [Montime_8:00AM-8:00PM] = '0' ”,但是我现在困扰在这里,因为我现在要更新为0,是根据错误代码类型,而不是整一列字段变为0 。。。所以困扰在这里不知道怎么下手
大约 2 年之前 回复
wodeqq584958184
wodeqq584958184 我用的是chart控件,VS里的asp.net
大约 2 年之前 回复

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

wodeqq584958184
wodeqq584958184 看不到图吗??、
大约 2 年之前 回复

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

wodeqq584958184
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;

    }
}

}

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问