学步园

效果图：

前台代码：
<table  width=100% align =center>
  <tr>
<td align=center>
  <dcwc:chart id="Chart1" runat="server"></dcwc:chart>
</td>
</tr>
</table>

后台代码：
protected Dundas.Charting.WebControl.Chart Chart1;
private void Page_Load(object sender, System.EventArgs e)
{

//初始化数组，简单测试数组随意赋值
string[] xValues = {
"00:05", "00:10", "00:15", "00:20", "00:25", "00:30",
"00:35", "00:40", "00:45", "00:50", "00:55", "01:05",
"01:10", "01:15", "01:20", "01:25", "01:30", "01:35",
"01:40", "01:45", "01:50", "01:55", "02:05", "02:10",
"02:15", "02:20", "02:25", "02:30", "02:35", "02:40",
"02:45", "02:50","02:55", "03:05", "03:10", "03:15",
"03:20", "03:25", "03:30", "03:35", "03:40", "03:45",
"03:50", "03:55", "04:05", "04:10", "04:15", "04:20",
"04:25", "04:30", "04:35", "04:40", "04:45", "04:50",
"04:55", "05:05", "05:10", "05:15", "05:20", "05:25"
};
double[] yValues = {
9.8, 10.1,10.6, 10.2, 10.5, 10.8, 10.7, 10.1, 10.6, 10.5,
10.5,9.8, 10.1, 10.6, 10.2, 10.5, 10.8, 10.7, 10.1, 10.6,
10.5,9.8, 10.1, 10.6, 10.2, 10.5, 10.8, 10.7, 10.1, 10.6,
10.5,9.8, 10.1, 10.6, 10.2, 10.5, 10.8, 10.7, 10.1, 10.6,
10.5,9.8, 10.1, 10.6, 10.2, 10.5, 10.8, 10.7, 10.1, 10.6,
10.5,9.8, 10.1, 10.6, 10.2, 10.5, 10.8, 10.7, 10.1, 10.6
};
double[] yValues2 = {
1, 3, 4, 2, 2,2, 5, 3, 4, 2,1, 3, 4, 2, 2,2, 5, 3, 4, 2,1,
3, 4, 2,2,2,5, 3, 4, 2,1, 3, 4, 2, 2,2, 5, 3, 4, 2,1, 3,4,
2, 2,2, 5, 3, 4, 2,1, 3, 4, 2, 2,2, 5, 3, 4, 2
};

//基本属性设置
InitChartAttr( Chart1 );

//添加绘图区
AddChartArea( Chart1,"ChartAreas_DayHisLine");

//添加电压值系列
Series serieDy = NewSerie( "电压值",SeriesChartType.Line,
xValues,yValues,"ChartAreas_DayHisLine" );
Chart1.Series.Add(serieDy);

//添加分结头位置系列
Series serieFjt = NewSerie( "分结头位置",SeriesChartType.Line,
xValues,yValues2,"ChartAreas_DayHisLine" );
//指定y轴类型
serieFjt.YAxisType = AxisType.Secondary;
Chart1.Series.Add(serieFjt);

}
/// <summary>
/// 初始化Chart
/// </summary>
/// <param name="Chart1">Chart的ID</param>
void InitChartAttr( Chart Chart1 )
{
//调色板的设置
Chart1.Palette = ChartColorPalette.Dundas;

//Chart背景色
Chart1.BackColor = Color.White;

//倾斜类型
Chart1.BackGradientType = GradientType.TopBottom;

//边框设置
Chart1.BorderLineStyle = ChartDashStyle.Solid;
Chart1.BorderLineWidth = 1;
Chart1.BorderLineColor = Color.Black;
Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Raised;

//生成图形的格式,可为Flash,Bmp,Emf,Jpeg,Svg,Png
Chart1.ImageType = ChartImageType.Flash;
//Chart1.RenderType = RenderType.ImageTag,通过流的形式,不生成实物

//生成图形的宽度和高度
Chart1.Width = 700;
Chart1.Height = 400;

//图形的url
Chart1.ImageUrl ="~/TempImages/ChartPic_#SEQ(300,3)";

//图形的标题
Chart1.Titles.Add( "历史曲线",Docking.Top,
new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold),
System.Drawing.Color.FromArgb(26, 59, 105) );

/*-----------------------------------------------------
* 标签(legend)的设置,用来排放各个系列的名字
* ---------------------------------------------------*/
//在图形中的位置
Chart1.Legends["Default"].Docking = LegendDocking.Bottom;
//在图形中的对齐方式
Chart1.Legends["Default"].Alignment = System.Drawing.StringAlignment.Center;
//排列方式
Chart1.Legends["Default"].LegendStyle = LegendStyle.Row;
//背景色透明
Chart1.Legends["Default"].BackColor = Color.Transparent;
//自适应文字
Chart1.Legends["Default"].AutoFitText = false;
}

  /// <summary>
  /// 给Chart添加一个绘图区,可添加多个
  /// 多系列同轴显示时,只添加一个绘图区
  /// 就可以
  /// </summary>
  /// <param name="Chart1">Chart的ID值</param>
  /// <param name="strChartAreaName">将要添加的绘图区的名字</param>
  /// 对于x轴竖线和y轴横线(即网格线的设置)的设置：
  /// Major代表在x轴上显示数据的竖线，不显示的忽略。
  /// Minor代表x轴上的所有竖线，只要有x值，不论是否x值在轴已显示。
void AddChartArea( Chart Chart1,string strChartAreaName)
{
/*----------------------------------------
* 添加绘图区
* --------------------------------------*/
//添加一个绘图区域,名字为ChartAreas_DayHisLine
Chart1.ChartAreas.Add(strChartAreaName);
//绘图区背景色
Chart1.ChartAreas[strChartAreaName].BackColor = Color.White;
//绘图区背影色为透明
Chart1.ChartAreas[strChartAreaName].ShadowColor = Color.Transparent;

/*----------------------------------------
* 设置绘图区的x轴
* --------------------------------------*/
//Chart1.ChartAreas[strChartAreaName].AxisX.LabelStyle.Format = "hh:mm";
Chart1.ChartAreas[strChartAreaName].AxisX.LabelsAutoFit = true;
//设置x轴值的旋转角度
Chart1.ChartAreas[strChartAreaName].AxisX.LabelStyle.FontAngle = 90;
Chart1.ChartAreas[strChartAreaName].AxisX.LabelStyle.Font = new Font("Times New Format",9f );
//分隔数
Chart1.ChartAreas[strChartAreaName].AxisX.Interval = 10;
//不显示网格竖划线
Chart1.ChartAreas[strChartAreaName].AxisX.MajorGrid.Enabled =false;
Chart1.ChartAreas[strChartAreaName].AxisX.MinorGrid.Enabled = false;

/*----------------------------------------
* 设置绘图区的y轴
* --------------------------------------*/
//为第一个y轴添加后缀
Chart1.ChartAreas[strChartAreaName].AxisY.Maximum = 12;
Chart1.ChartAreas[strChartAreaName].AxisY.Minimum = 8;
Chart1.ChartAreas[strChartAreaName].AxisY.LabelStyle.Format = "0kV";
Chart1.ChartAreas[strChartAreaName].AxisY.LabelStyle.Font = new Font("Times New Format",9f );

//为第二个y轴添加后缀
Chart1.ChartAreas[strChartAreaName].AxisY2.Maximum = 12;
Chart1.ChartAreas[strChartAreaName].AxisY2.Minimum = 0;
Chart1.ChartAreas[strChartAreaName].AxisY2.LabelStyle.Format = "0档";
Chart1.ChartAreas[strChartAreaName].AxisY2.LabelStyle.Font = new Font("Times New Format",9f );

/*----------------------------------------
* 设置绘图区y轴的上下限值,两个红色的横线
* --------------------------------------*/
StripLine slUp = GetStripLine("10.7kV",10.7,0.05);
Chart1.ChartAreas[strChartAreaName].AxisY.StripLines.Add(slUp);
StripLine slDown = GetStripLine("10kV",10,0.05);
Chart1.ChartAreas[strChartAreaName].AxisY.StripLines.Add(slDown);
}

/// <summary>
/// 新建一个系列
/// </summary>
/// <param name="strSerieName">系列的名称</param>
/// <param name="type">系列图形的类型,可以选择为线形，饼图，棒图等</param>
/// <param name="xValues">x轴数组</param>
/// <param name="yValues">y轴数组</param>
/// <param name="strChartArea">所属区域名称</param>
/// <returns>返回一个系列</returns>/*-------------附绑定值的说明---------------
#VALX X value of the data point
#VAL, #VALY, #VALY2, #VALY3, ... Y values of the data point
#SER Series name
#LABEL: Data point label
#INDEX Data point index
#PERCENT Percentage of the data point Y value
#TOTAL Total of all Y values in the series
#LEGENDTEXT Legend text
--------------------------------------------*/
Series NewSerie( string strSerieName,SeriesChartType type,string[] xValues,
double[] yValues,string strChartArea )
{

//新建一个系列
Series serie = new Series( strSerieName );
//该系列的图形类型
serie.Type = type;
//该系列的图形的宽度
serie.BorderWidth = 2;
//该系列的图形的边框色
serie.BorderColor = Color.DarkGray;
//阴影和图形的距离
serie.ShadowOffset = 2;
//字体
serie.Font = new Font("Times New Format", 7f );
//添加响应鼠标的提示符
if( strSerieName == "电压值" )
serie.ToolTip = "#VALX,#VAL kV";
else
serie.ToolTip = "#VALX,#VAL";
//为图形绑定值
serie.Points.DataBindXY(xValues,yValues);
/*添加LegendText值
for( int i = 0; i < serie.Points.Count; i++ )
{
serie.Points[ i ].LegendText = xValues[ i ];
}*/
//指定所属的绘图区域
serie.ChartArea = strChartArea;
return serie;
}

/// <summary>
/// 添加上下限分割线
/// </summary>
/// <param name="title">分割线的名字</param>
/// <param name="dOffsetVal">分割线对应的y轴值</param>
/// <param name="dWidth">分隔线宽度</param>
/// <returns></returns>StripLine GetStripLine(string title,double dOffsetVal,double dWidth)
{
StripLine sl = new StripLine();
sl.TitleAlignment = System.Drawing.StringAlignment.Near;
sl.TitleFont = new Font("Times New Format",8f );
//分隔线的宽度
sl.StripWidth = dWidth;
//分隔线的标题
sl.Title = title;
//分隔线的颜色
sl.BackColor = Color.Red;
//分隔线的y轴值
sl.IntervalOffset = dOffsetVal;
return sl;
}