关于想在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。其它另外九个标签也是如此。
请问这个效果能实现出来吗，如果能，效果该怎么实现出来？？
顺便发上我的后台代码：
帮你写个简单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>
你的图片都查看不了，后台代码也没发。
后台代码：
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;
}
}
}
不知道我说的按钮效果能不能实现出来。。。 有大神或者导师帮我了解一哈吗？？
你是什么图表控件，自己看下api支持不支持添加附加按钮，不支持就麻烦了，或者看下是否svg绘图，svg绘图x轴有dom对象，可以通过dom对象来生成对应的按钮
如果是canvas就没搞头了，只能看图表是否支持你这种要求的设置。或者直接点击错误号的文本执行ajax操作，发送错误到到服务器进行数据库更新
推荐一个插件给你 应该能满足你的需求。 Echart