WebForm中Chart图表同时设置几条折线

最新推荐文章于 2022-03-06 23:01:08 发布

吃瓜日常

最新推荐文章于 2022-03-06 23:01:08 发布

阅读量1.2k

点赞数

分类专栏：基础实用知识文章标签： C# ASP.NET WebForm 后台代码 Chart图表

本文链接：https://blog.csdn.net/qq_42450386/article/details/85156187

版权

基础实用知识专栏收录该内容

17 篇文章 2 订阅

订阅专栏

最近因为公司要求做一个折线图显示几个不同的产品在不同时间的水平，所以用到Chart图表，在网上也是找了很多资料，整理了很久，希望对大家能够有用,代码大部分重点都有备注，没有备注的地方大家应该也能理解, 话不多说，直接上代码.

前台代码：基本都是拉取WebForm控件自动生成的。

<body>
    <form id="form1" runat="server">
    <div>
        <asp:Chart ID="Chart1" runat="server" OnLoad="Chart1_Load1" Width="601px">
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                </asp:ChartArea>
            </ChartAreas>
            <Legends>
                <asp:Legend Name="Legend1">
                </asp:Legend>
            </Legends>
        </asp:Chart>
    </div>
    <p>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="进入网格图表" />
    </p>
    </form>
</body>

后台代码：代码尾部标备注的几行代码跟前面代码是一样的，都可以实现功能，大家可以两个都试试。


protected void Chart1_Load1(object sender, EventArgs e)
        {
            Chart1.Titles.Add("折线图报表");
            Chart1.ChartAreas[0].AxisX.Title = "日期时间";//设置X轴的标题
            Chart1.ChartAreas[0].AxisY.Title = "产品水平";//设置Y轴的标题
            Chart1.ChartAreas[0].AxisY.Interval = 10;//设置X轴间距，这样的话，就间距固定为10           
            string constr = "Data Source=10.119.8.11;Initial Catalog=SHWIP;Persist Security Info=True;User ID=shwip;Password=shwip";
            SqlConnection con = new SqlConnection(constr);
            //打开连接；
            con.Open();

            //第一条折线
            string sql = "SELECT * FROM APiece WHERE APiece.Piece_PId=1";
            DataTable ds = new DataTable();
            SqlDataAdapter sda = new SqlDataAdapter(sql, con);
            sda.Fill(ds);
            Chart1.DataSource = ds;
            Series dataTable1Series = new Series("产品1");
            dataTable1Series.Points.DataBind(ds.AsEnumerable(), "Piece_Time", "Piece_Level", "");//连接数据库中的时间日期列和产品水平列
            dataTable1Series.XValueType = ChartValueType.DateTime; //设置X轴类型为时间
            dataTable1Series.ChartType = SeriesChartType.Spline;  //设置Y轴为折线
            Chart1.Series.Add(dataTable1Series);
            Chart1.Series["产品1"].IsValueShownAsLabel = true;

            //第二条折线
            string sql1 = "SELECT * FROM APiece WHERE APiece.Piece_PId=2";
            DataTable ds1 = new DataTable();
            SqlDataAdapter sda1 = new SqlDataAdapter(sql1, con);
            sda1.Fill(ds1);
            Chart1.DataSource = ds1;

            Series dataTable1Series1 = new Series("产品2");
            dataTable1Series1.Points.DataBind(ds1.AsEnumerable(), "Piece_Time", "Piece_Level", "");
            dataTable1Series1.XValueType = ChartValueType.DateTime; //设置X轴类型为时间
            dataTable1Series1.ChartType = SeriesChartType.Spline;  //设置Y轴为折线
            Chart1.Series.Add(dataTable1Series1);
            Chart1.Series["产品2"].IsValueShownAsLabel = true;

            //第三条折线
            string sql2 = "SELECT * FROM APiece WHERE APiece.Piece_PId=3";
            DataTable ds2 = new DataTable();
            SqlDataAdapter sda2 = new SqlDataAdapter(sql2, con);
            sda2.Fill(ds2);
            Chart1.DataSource = ds2;

            Series dataTable1Series2 = new Series("产品3");
            dataTable1Series2.Points.DataBind(ds2.AsEnumerable(), "Piece_Time", "Piece_Level", "");
            dataTable1Series2.XValueType = ChartValueType.DateTime; //设置X轴类型为时间
            dataTable1Series2.ChartType = SeriesChartType.Spline;  //设置Y轴为折线
            Chart1.Series.Add(dataTable1Series2);
            Chart1.Series["产品3"].IsValueShownAsLabel = true;
            //Series ss = new Series("产品1");   //这里 dt1 ,dt2 任意取名称，但要唯一
            //ss.Points.DataBind(ds.AsEnumerable(), "Piece_Time", "Piece_Level", "");
            //ss.XValueType = ChartValueType.DateTime; //设置X轴
            //ss.ChartType = SeriesChartType.Spline;   //设置Y轴为折线
            //Chart1.Series.Add(ss);

            第二条数据
            //Series ss2 = new Series("产品2");
            //ss2.Points.DataBind(ds1.AsEnumerable(), "Piece_Time", "Piece_Level", "");
            //ss2.XValueType = ChartValueType.DateTime; //设置X轴
            //ss2.ChartType = SeriesChartType.Spline;   //设置Y轴为折线
            //Chart1.Series.Add(ss2);

            第三条数据
            //Series ss3 = new Series("产品3");
            //ss3.Points.DataBind(ds2.AsEnumerable(), "Piece_Time", "Piece_Level", "");
            //ss3.XValueType = ChartValueType.DateTime; //设置X轴
            //ss3.ChartType = SeriesChartType.Spline;   //设置Y轴为折线
            //Chart1.Series.Add(ss3);
        }

附上一些引用：

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.Web.UI.DataVisualization.Charting;