关于想在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值可能要误更新了
一年多之前 回复

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

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

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

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

wodeqq584958184
wodeqq584958184 看不到图吗??、
一年多之前 回复

后台代码:

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;

    }
}

}

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

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

wodeqq584958184
wodeqq584958184 好的 谢谢
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
ASP.NET网页动态抓取问题
-
ASP.NET网页如何实现文字水平循环向左滚动代码
-
ASP.NET MVC怎么实现在一个页面中,几秒之后自动跳转到另一个页面的效果?
-
asp.net 实现网页的部分截图
-
asp.net网页编程 ajax调用webservice问题.
-
在asp.net网页上如何显示搜索关键字,如何得知用户通过什么百度关键字进来的?代码怎么写?
-
asp.net 网页拖选一行文字,弹出一个按钮,将改行文字传回后台
-
asp.net上的一个效果 不知道是哪个控件实现的,求大神告知
-
asp.net网页嵌套处理,求解决方法
-
asp.net(c#)实现网页发送短信
-
asp.net网页制作两个网页之间的本地链接如何链接,地址是什么?
-
请问如何在ASP.NET MVC 中使用ElementUI
-
asp.net web应用程序 添加一个外部类 访问asp.net页面里的一个txtbox,然后赋值!
-
asp获取asp.net的session
-
asp.net mvc通过分部视图实现jquery中load的效果疑问
-
asp.net mvc怎样实现登录查看其它用户的公开信息的功能
-
在VS2010里的asp.net中添加了一个button按钮如何实现点击这个按钮执行SQL语句
-
ASP.NET网站实现中英切换
-
如何设置在插入asp.net控件时,不要将网页中的html表单转换为asp.net表单,不要删除其当前属性
-
程序员实用工具网站
目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、在线工具宝典大全 程序员开发需要具备良好的信息检索能力,为了备忘(收藏夹真是满了),将开发过程中常用的网站进行整理。 1、搜索引擎 1.1、秘迹搜索 一款无敌有良心、无敌安全的搜索引擎,不会收集私人信息,保...
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
别再翻了,面试二叉树看这 11 个就够了~
写在前边 数据结构与算法: 不知道你有没有这种困惑,虽然刷了很多算法题,当我去面试的时候,面试官让你手写一个算法,可能你对此算法很熟悉,知道实现思路,但是总是不知道该在什么地方写,而且很多边界条件想不全面,一紧张,代码写的乱七八糟。如果遇到没有做过的算法题,思路也不知道从何寻找。面试吃了亏之后,我就慢慢的做出总结,开始分类的把数据结构所有的题型和解题思路每周刷题做出的系统性总结写在了 Github...
Java泛型 通配符详解
对于<? super 类型>,编译器将只允许写操作,不允许读操作。即只可以设值(比如set操作),不可以取值(比如get操作)。 对于<? extends 类型>,编译器将只允许读操作,不允许写操作。即只可以取值,不可以设值。 以上两点都是针对于源码里涉及到了类型参数的函数而言的。比如对于List而言,不允许的写操作有add函数,因为它的函数签名是boolean add(E e);,此时这个形参E就变成了一个涉及了通配符的类型;而不允许的读操作有get函数,因为它的函数签名是E get(int index)
代码整洁 vs 代码肮脏
写出整洁的代码,是每个程序员的追求。《clean code》指出,要想写出好的代码,首先得知道什么是肮脏代码、什么是整洁代码;然后通过大量的刻意练习,才能真正写出整洁的代码。 WTF/min是衡量代码质量的唯一标准,Uncle Bob在书中称糟糕的代码为沼泽(wading),这只突出了我们是糟糕代码的受害者。国内有一个更适合的词汇:屎山,虽然不是很文雅但是更加客观,程序员既是受害者也是加害者。 对...
让程序员崩溃的瞬间(非程序员勿入)
今天给大家带来点快乐,程序员才能看懂。 来源:https://zhuanlan.zhihu.com/p/47066521 1. 公司实习生找 Bug 2.在调试时,将断点设置在错误的位置 3.当我有一个很棒的调试想法时 4.偶然间看到自己多年前写的代码 5.当我第一次启动我的单元测试时 ...
接私活必备的 10 个开源项目!
点击蓝色“GitHubDaily”关注我加个“星标”,每天下午 18:35,带你逛 GitHub!作者 | SevDot来源 | http://1t.click/VE8W...
阿里资深工程师教你如何优化 Java 代码!
作者 | 王超 责编 | 伍杏玲 明代王阳明先生在《传习录》谈为学之道时说: 私欲日生,如地上尘,一日不扫,便又有一层。着实用功,便见道无终穷,愈探愈深,必使精白无一毫不彻方可。 代码中的"坏味道",如"私欲"如"灰尘",每天都在增加,一日不去清除,便会越累越多。如果用功去清除这些"坏味道",不仅能提高自己的编码水平,也能使代码变得"精白无一毫不彻"。这里,整理了日常工作中的一...
周杰伦新歌《说好不哭》上线,程序员哭了......
欢迎添加华为云小助手微信(微信号:HWCloud002或HWCloud003),输入关键字“加群”,加入华为云线上技术讨论群;输入关键字“最新活动”,获取华为云最新特惠促销。华为云诸多技术大咖、特惠活动等你来撩! 前些天,场主的朋友圈被一首歌刷屏了。 数据有多牛逼?除了揽获各大新闻头条,新歌发售3小时,数字专辑就在QQ音乐卖了360万张。以单价3元计算,一首《说好不哭》已狂揽千万...
GitHub开源的10个超棒后台管理面板
目录 1、AdminLTE 2、vue-Element-Admin 3、tabler 4、Gentelella 5、ng2-admin 6、ant-design-pro 7、blur-admin 8、iview-admin 9、material-dashboard 10、layui 项目开发中后台管理平台必不可少,但是从零搭建一套多样化后台管理并不容易,目前有许多开源、免费、...
Java中创建对象的5种方法
将会列举5种方法去创建 Java 对象,以及他们如何与构造函数交互,并且会有介绍如何去使用这些方法的示例。 作为一个 Java 开发人员,我们每天都会创建大量的 Java 对象,但是我们通常会使用依赖管理系统去创建这些对象,例如 Spring 。然而,我们可以有更多的方式去创建对象,让我们一起在文章中去学习这些方法吧。 这里列举在 Java 中创建对象的五种方式,下面将介绍它们的示例,以及创建对象...
100 个网络基础知识普及,看完成半个网络高手
欢迎添加华为云小助手微信(微信号:HWCloud002或HWCloud003),输入关键字“加群”,加入华为云线上技术讨论群;输入关键字“最新活动”,获取华为云最新特惠促销。华为云诸多技术大咖、特惠活动等你来撩! 1)什么是链接? 链接是指两个设备之间的连接。它包括用于一个设备能够与另一个设备通信的电缆类型和协议。 2)OSI 参考模型的层次是什么? 有 7 个 OSI 层:物理...
动画:面试如何轻松手写链表?
写在前边 暑假参加的第一个公司的就让我手写一个双向链表,并完成插入数据和删除数据的操作。当时我很蒙蔽,懵逼的不是思路,而是手写,虽然写出来了,但是很多边界条件和代码规范自我感觉不好,所以有了这些细心的总结。那么今天的主题就是徒手写链表,应聘者该如何下手? 我们通常写链表准备应聘的时候,通常背加上理解,但是过了几天又让你写。就会陌生了,虽然有点思路。还是模模糊糊,小鹿也有这个记性的“毛病”,“有毛病...
栈和队列:面试题(Java)
两个队列实现一个栈 使用两个队列完成栈的功能, 思路: 如上图,入队顺序为:1 2 3 4 5,如果要模拟栈的功能,那么就要上5先弹出来,因为是队列,所以只能从1开始出,把1 2 3 4存到另外一个队列中,这样就可以把5弹出来了: 这样就完成了一次出栈,这下上面的队列为空,所有的数据存储在下面这个队列中: 如果要继续出栈,那么就把1 2 3 挪到空的队列中,弹出4,到这里已经明白了如何模拟出...
Google离开我们快十年了
2010年1月13日,Google离开中国。掐指算来,Google已经离开我们快十年了。2010年是个特殊的年份,这一年还发生了3Q大战。为什么诸多大事都发生在2010年...
中国最顶级的一批程序员,从首富到首负!
过去的20年是程序员快意恩仇的江湖时代通过代码,实现梦想和财富有人痴迷于技术,做出一夜成名的产品有人将技术变现,创办企业成功上市这些早一代的程序员们创造的奇迹引发了一浪高...
为什么面向对象糟透了?
又是周末,编程语言“三巨头”Java, Lisp 和C语言在Hello World咖啡馆聚会。服务员送来咖啡的同时还带来了一张今天的报纸, 三人寒暄了几句, C语言翻开了...
分享靠写代码赚钱的一些门路
作者 mezod,译者 josephchang10如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。今天给大家分享一个精彩...
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
程序员该如何把 Windows 系统打造的跟 Mac 一样牛逼?
起因:之前一直用Mac开发,换了家公司,只许用Windows下开发,说实话,一开始我是拒绝的,可自从看到了这几个工具以后......1、终端工具:item2 VS Cmd...
技术人员要拿百万年薪,必须要经历这9个段位
很多人都问,技术人员如何成长,每个阶段又是怎样的,如何才能走出当前的迷茫,实现自我的突破。所以我结合我自己10多年的从业经验,总结了技术人员成长的9个段位,希望对大家的职...
相关热词 c# oracle 开发 c#选择字体大小的控件 c# usb 批量传输 c#10进制转8进制 c#转base64 c# 科学计算 c#下拉列表获取串口 c# 如何防止参数被修改 c#开发微信公众号例子 c# null