DEV控件中的WebChartControl的柱状图的应用

最新推荐文章于 2023-09-26 14:12:05 发布

Jlins

最新推荐文章于 2023-09-26 14:12:05 发布

阅读量5.5k

点赞数

这是第二篇了！最近在学习DEV控件，对WebChartControl图形报表这个控件想学习下，但是用的太死，还有很多不懂，想多几种图形报表，如果有高手请留个联系方式吧，新手求学习！

今天这个首先来看一下效果图如下:

这个算是一个比较浅的吧！首先我们来看这个控件的后台绑定数据！

View Code

 1 public void Bind(string bar)
 2         {
 3             //清除内容
 4             WebChartControl1.Series.Clear();
 5            //sql访问
 6             string sql = "select one,two,three,four from maths";
 7             XrCon xr = new XrCon();
 8             DataSet ds=xr.DataSouces(sql);
 9             Series s1=null;
10             Series s2=null;
11             //建立内容
12             if (bar == "bar")
13             {
14                 s1 = new Series("1#泵", ViewType.Bar);
15                 s2 = new Series("2#泵", ViewType.Bar);
16             }
17             else if(bar=="bar3D")
18             {
19                 s1 = new Series("1#泵", ViewType.Bar3D);
20                 s2 = new Series("2#泵", ViewType.Bar3D);
21 
22             }
23             SeriesPoint sp1 = new SeriesPoint("瞬时流量", new double[] {Convert.ToDouble(ds.Tables[0].Rows[0]["one"])});
24             SeriesPoint sp2 = new SeriesPoint("瞬时流量", new double[] { Convert.ToDouble(ds.Tables[0].Rows[0]["three"]) });
25             SeriesPoint sp3 = new SeriesPoint("累计流量", new double[] { Convert.ToDouble(ds.Tables[0].Rows[0]["two"]) });
26             SeriesPoint sp4 = new SeriesPoint("累计流量", new double[] { Convert.ToDouble(ds.Tables[0].Rows[0]["four"]) });
27             s1.Points.Add(sp1);
28             s1.Points.Add(sp3);
29             s2.Points.Add(sp2);
30             s2.Points.Add(sp4);
31       
32             WebChartControl1.Series.Add(s1);
33             WebChartControl1.Series.Add(s2);
34            
35         }

代码比较简单，我用的是一项一项进行添加，没有用直接用数据库的字段进行X，Y轴的绑定，原因是有4个字段，我只能用这种方法解决。正在努力学习相关的东西，争取更灵活的运用。

Series s1=null;Series s2=null;这两个就是上图的瞬时流量一块和累计流量一块。

s1 = new Series("1#泵", ViewType.Bar);
s2 = new Series("2#泵", ViewType.Bar);

中的ViewType.Bar就是要展示的图标类型，这个就是代表柱状图，还有很多，比如说下面的ViewType.Bar3D，这个就是3D的柱状图，还有其他，不同的图绑定数据的方式有所不同，我现在就想弄一个饼状图的。

确定类型以后就给两块进行内容添加，然后再WebChartControl1.Series.Add(s1);WebChartControl1.Series.Add(s2);就算是绑定完成，这是可以运行了。

上图的3D柱状统计表按钮是切换成3D柱状图，其实就是更改了ViewType.Bar3D，其他都没有变。进行两种图标的切换。

最后就是导出，打开该图标了，打印不知道是我这边没有打印机还是什么原因，点了没有反应。导出和在线打开都ok。

View Code

 1 <dxm:ASPxMenu SkinID="ChartDemoToolbar" ID="mnuToolbar" runat="server" ClientInstanceName="mnuToolbar" ApplyItemStyleToTemplates="True">
 2         <Items>
 3             <dxm:MenuItem Name="mnuPrint" Text="打印该图表" ToolTip="打印该图表">
 4                 
 5             </dxm:MenuItem>
 6             <dxm:MenuItem Name="mnuSaveToDisk" Text="导出图表并保存" ToolTip="导出图表并保存" BeginGroup="True">
 7                 
 8             </dxm:MenuItem>
 9             <dxm:MenuItem Name="mnuSaveToWindow" Text="在线打开图表" ToolTip="在线打开图表">
10                 
11             </dxm:MenuItem>
12             <dxm:MenuItem Name="mnuFormat"><Template>
13                 <dx:ASPxComboBox runat="server" Width="60px" ValueType="System.String" ID="cbFormat" SelectedIndex="0" ClientInstanceName="cbFormat">
14                     <Items>
15                         <dx:ListEditItem Value="pdf" Text="pdf" />
16                         <dx:ListEditItem Value="xls" Text="xls" />
17                         <dx:ListEditItem Value="png" Text="png" />
18                         <dx:ListEditItem Value="jpeg" Text="jpeg" />
19                         <dx:ListEditItem Value="bmp" Text="bmp" />
20                         <dx:ListEditItem Value="tiff" Text="tiff" />
21                         <dx:ListEditItem Value="gif" Text="gif" />
22                     </Items>
23                 </dx:ASPxComboBox>
24             </Template></dxm:MenuItem>
25             
26         </Items>
27         <ClientSideEvents ItemClick="function(s, e) {
28     if (e.item.name == 'mnuPrint')
29         gauge.Print();
30     if (e.item.name == 'mnuSaveToDisk')
31         gauge.SaveToDisk(cbFormat.GetText());
32     if (e.item.name == 'mnuSaveToWindow')
33         gauge.SaveToWindow(cbFormat.GetText());
34 }" />
35     </dxm:ASPxMenu>

主要就是通过点击判断MenuItem的NAME值，然后再进行打印（Print（）），导出（SaveToDisk（导出的格式）），在线打开（SaveToWindow(打开的格式)）的相关操作，格式主要根据下拉框的text进行选择。Print（），SaveToDisk（），SaveToWindow（）这三个算是我第一次见吧。

这样功能就差不多就OK了。

点击切换的效果如下图: