java mschart_asp.net微软图表控件MsChart

前段时间,开发项目时,由于需要,需要将一些数据统计,并以图表形式显示。由于是asp.net,所以就找到了MsChart图表控件,还是挺方便实用的,分享一下。

MsChart控件的主要组成如图所示

d6688fd499f2b9fe405972bbdde8224c.png

工具栏中找到“Chart”控件,将其拖进前台中

29480b0a96cd1638190db0126765f84c.png

一旦将Chart控件拖放至前台,强大的IDE帮助你完成了一些事情

460a411799de12314444890273185932.png

并引用了System.Web.DataVisualization动态库,而且还在网站配置文件Web.config中添加了

5b260dc8e9773fff938f143cf5c4c0ee.png

其中在配置文件中添加的代码,在正式发布网站时,要做些许修改,后面我们再详说。

详细的MSChart参数,可以查看MSDN文档。

7ebe2f1977991d2b76f0d26c3acd4929.png

前台代码中,添加控件

48304ba5e6f9fe08f3fa1abda7d326ab.png

48304ba5e6f9fe08f3fa1abda7d326ab.png

在后台代码中,首先创建一个函数,用于存储数据,用Datatable存储。

8f900a89c6347c561fdf2122f13be562.png创建一张二维数据表

接下来,对Chart控件进行数据绑定、属性设置等操作。

哲学图

8f900a89c6347c561fdf2122f13be562.png折线图

效果图

9152243f0b75746a7bb9c3dcc59d9f33.png

同样的方法实现其他几种图形

样条图(平滑曲线)

8f900a89c6347c561fdf2122f13be562.png样条图(平滑曲线)

效果图

5babf9a553272576d248699a205b6cc7.png

条形图

8f900a89c6347c561fdf2122f13be562.png条形图

效果图

6c0db95bde4fd549fdf8516aeb80ef38.png

饼形图

961ddebeb323a10fe0623af514929fc1.png

48304ba5e6f9fe08f3fa1abda7d326ab.png

1 #region 饼形图

2 Chart4.DataSource = dt;//绑定数据

3 Chart4.Series["Series1"].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Pie;//设置图表类型

4 Chart4.Series[0].XValueMember = "Language";//X轴数据成员列

5 Chart4.Series[0].YValueMembers = "Count";//Y轴数据成员列

6 Chart4.Series[0].LegendText = "Language";

7 Chart4.Series[0].IsValueShownAsLabel = true;//显示坐标值

8 #endregion

48304ba5e6f9fe08f3fa1abda7d326ab.png

效果图

8c0d03abd31e4999f7b32cf9ea88f4f4.png

更多图表例子,可参考msdn的demo。

文章开头,我们谈到添加MSChart控件时,IDE会自动修改了我们Web.config中的代码。

我们在正式上传网站到服务器时,如果不修改一些地方,会出现MSChart错误。我要在Web.config中将如下代码修改

953c61406766c50f575a06b08902f928.png

改成

905650ae040b02e82eb9430b4230fac1.png

目的是改成相对地址,避免在上传到服务器时,路径出现错误。

还需在解决方案下新增TempImages文件夹

8ba2f43493333835ef93a3cc09f5e941.png

OK,基本的MsChart控件使用就这样,更详细的使用可以参考MSDN或者微软提供的Demo。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值