第一:建立一个项目,添加对WebChart.dll的引用。(如果没有请到网上搜索下载)
第二:把WebChart添加到工具箱里,把WebChart添加到页面,同时在页面上添加两个Button。页面代码如下:
body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button" />
<Web:ChartControl ID="ChartControl1" runat="server" BorderStyle="Outset" BorderWidth="5px" Height="328px" Width="700px" YCustomEnd="500" YCustomStart="100">
<YAxisFont StringFormat="Far,Near,Character,LineLimit" Text="errer" />
<XTitle StringFormat="Center,Near,Character,LineLimit" Text="erererer" />
<ChartTitle StringFormat="Center,Near,Character,LineLimit" />
<XAxisFont StringFormat="Center,Near,Character,LineLimit" />
<Background Color="LightSteelBlue" />
<YTitle StringFormat="Center,Near,Character,LineLimit" />
</Web:ChartControl></div>
</form>
</body>
第三:添加WebChart的命名空间:using WebChart;;
第四:在后台添加如下代码:
protected void Button1_Click(object sender, EventArgs e)
{
doIt();
![](/Images/OutliningIndicators/InBlock.gif)
}
//定义一个颜色数组,供循环时为不同的记录填充不同的颜色
private string[] myColor = new string[]
{
"Tomato",//西红柿
"Black",
"Gold",
"Blue",
"Green",
"Orange",
"Pink",//粉红
"Violet",//紫罗兰
"Orchid",//淡紫色
"Lime",//亮绿
"Tan",//茶色
"Red",
"Navy"//橘红
};
//用静态方式示例了画出一条两个点的最简单折线.实际项目据此做循环而以.
private void doIt()
{
//创建折线对象
LineChart myChart = new LineChart();
//为折线填充颜色
myChart.Line.Color = System.Drawing.Color.FromName(myColor[0]);
myChart.Fill.Color = System.Drawing.Color.FromName(myColor[0]);
myChart.LineMarker = new DiamondLineMarker(8, System.Drawing.Color.FromName(myColor[0]), System.Drawing.Color.FromName(myColor[0]));
//图例说明
myChart.Legend = "折线一";
//添加第一个点,参数一为x座标上的名称,参数二为y座标上的值
myChart.Data.Add(new ChartPoint("一", float.Parse("100")));
//添加第二个点
myChart.Data.Add(new ChartPoint("二", float.Parse("150")));
myChart.Data.Add(new ChartPoint("三", float.Parse("180")));
myChart.Data.Add(new ChartPoint("四", float.Parse("300")));
//chart为控件ID
this.ChartControl1.Charts.Add(myChart);
this.ChartControl1.RedrawChart();
![](/Images/OutliningIndicators/InBlock.gif)
LineChart myChart1 = new LineChart();
//为折线填充颜色
myChart1.Line.Color = System.Drawing.Color.FromName(myColor[1]);
myChart1.Fill.Color = System.Drawing.Color.FromName(myColor[1]);
myChart1.LineMarker = new DiamondLineMarker(8, System.Drawing.Color.FromName(myColor[1]), System.Drawing.Color.FromName(myColor[1]));
//图例说明
myChart1.Legend = "折线二";
//添加第一个点,参数一为x座标上的名称,参数二为y座标上的值
myChart1.Data.Add(new ChartPoint("一", float.Parse("70")));
//添加第二个点
myChart1.Data.Add(new ChartPoint("二", float.Parse("150")));
myChart1.Data.Add(new ChartPoint("三", float.Parse("160")));
myChart1.Data.Add(new ChartPoint("四", float.Parse("270")));
//chart为控件ID
this.ChartControl1.Charts.Add(myChart1);
this.ChartControl1.RedrawChart();
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
LineChart myChart2 = new LineChart();
//为折线填充颜色
myChart2.Line.Color = System.Drawing.Color.FromName(myColor[1]);
myChart2.Fill.Color = System.Drawing.Color.FromName(myColor[1]);
myChart2.LineMarker = new DiamondLineMarker(8, System.Drawing.Color.FromName(myColor[4]), System.Drawing.Color.FromName(myColor[4]));
//图例说明
myChart2.Legend = "折线san";
//添加第一个点,参数一为x座标上的名称,参数二为y座标上的值
myChart2.Data.Add(new ChartPoint("一", float.Parse("200")));
//添加第二个点
myChart2.Data.Add(new ChartPoint("二", float.Parse("210")));
myChart2.Data.Add(new ChartPoint("三", float.Parse("270")));
myChart2.Data.Add(new ChartPoint("四", float.Parse("40")));
//chart为控件ID
this.ChartControl1.Charts.Add(myChart2);
this.ChartControl1.RedrawChart();
}
![](/Images/OutliningIndicators/None.gif)
protected void Button2_Click(object sender, EventArgs e)
{
bindchart();
![](/Images/OutliningIndicators/InBlock.gif)
}
![](/Images/OutliningIndicators/None.gif)
//调用该方法生成柱状图
private void bindchart()
{
//获取一个DataTable,具体函数略![](/Images/dot.gif)
DataTable dt = new DataTable();
//if (dt != null)
//{
int count = 5;
int count1 = 120;
if (count > 0)
{
//遍历DataTable为每条记录生成一个柱状
for (int i = 0; i < count; i++)
{
//创建对象
ColumnChart mychart = new ColumnChart();
//设置柱子宽度
mychart.MaxColumnWidth = 48;
//颜色
mychart.Fill.Color = System.Drawing.Color.FromName(this.myColor[i]);
//在柱子上显示数量
mychart.DataLabels.Visible = true;
//数量的字体
mychart.DataLabels.Font = new System.Drawing.Font("Verdana", 14);
//添加
mychart.Data.Add(new ChartPoint(i.ToString(), float.Parse(count1.ToString())));
//备注
mychart.Legend = "fdfdf" + count;
this.ChartControl1.Charts.Add(mychart);
count1 += 80;
}
//辅助设置
//背景色
ChartControl1.Background.Color = System.Drawing.Color.FromArgb(165, 0, 16);
ChartControl1.YAxisFont.ForeColor = System.Drawing.Color.FromArgb(165, 0, 16);
ChartControl1.XAxisFont.ForeColor = System.Drawing.Color.FromArgb(165, 0, 16);
//内部线条
ChartControl1.Border.Color = System.Drawing.Color.FromArgb(200, 200, 200);
//边框样式
ChartControl1.BorderStyle = BorderStyle.None;
//y最大值
double max = double.Parse((count+300).ToString());
//递增值
int intv = 2;
![](/Images/OutliningIndicators/InBlock.gif)
//数量小于16的情况
if (max < 16)
{
max = 16;
}
//大于16的情况
else
{
intv = int.Parse(Math.Ceiling(max / 8).ToString());
max += intv;
}
//设置Y轴终点值
ChartControl1.YCustomEnd = int.Parse(max.ToString());
//y递增值
ChartControl1.YValuesInterval = intv;
//生成
this.ChartControl1.RedrawChart();
}
//}
}
运行就OK了。
第二:把WebChart添加到工具箱里,把WebChart添加到页面,同时在页面上添加两个Button。页面代码如下:
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
第三:添加WebChart的命名空间:using WebChart;;
第四:在后台添加如下代码:
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/dot.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
运行就OK了。