AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

ASP.NET MVC 3 Beta初体验之超酷的Chart

2018-01-01 1532
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
   前面一篇文章： ASP.NET MVC 3 Beta初体验之WebGrid介绍了WebGrid控件的使用，ASP.NET MVC 3 Beta中才内置Chart的。这篇文章中将介绍Chart的使用。包括Chart数据源的配置、Chart的显示、Chart保存三个方面。Chart是很多系统中使用，所以在ASP.NET MVC 3 Beta初体验之中介绍它是很有必要的。
1、配置Chart的数据源
给Chart配置数据源大概有三种方式。
第一种：使用数组
示例：
Controller代码：
public  ActionResult BasicChart()
{
 return  View();
}
BasicChart.cshtml代码：
复制代码
< p >
@{
var key  = new  Chart(width:  600 , height:  400 )
.AddTitle( " 人员流动情况 " )
.AddSeries(name:  " Employee " ,xValue:  new [] {  " 一月份 " ,  " 二月份 " ,  " 三月份 " ,  " 四月份 " ,  " 五月份 " ,  " 六月份 " ,  " 七月份 " ,  " 八月份 " ,  " 九月份 " }, yValues:  new [] {  " 2 " ,  " 6 " ,  " 4 " ,  " 5 " ,  " 3 " , " 4 " , " 9 " , " 2 " , " 5 " })
.Write();
}
 </ p >
复制代码
从上面代码可以看到，我给 Chart的xValue配置了一个数组，相应的yValue也配置了一个相应的数组。
运行效果：
此时，我们发现这个图形是单独显示的，没有站点的样式和母版。下面实现将这个图形显示在一个页面中。 
定义一个Action：
public  ActionResult ShowBasicChart()
{
 return  View();
}
View代码：定义一个img标签，将src改成生成图片的action。
< p >< img  src ="BasicChart" /> </ p >
 效果：有了站点样式和母板：
第二种方式：数据库查询
示例：
@{ var db  =  Database.Open( " SmallBakery " ); 
var data  =  db.Query( " SELECT Month, Number FROM Employee " ); 
var key  = new  Chart(width:  600 , height:  400 ) 
.AddTitle( " 人员流动 " ) 
.DataBindTable(dataSource: data, xField:  " Month " )
.Write(); }
第三种方式：XML
示例：
复制代码
@using System.Data; @{ 
 var dataSet  = new  DataSet(); 
dataSet.ReadXmlSchema(Server.MapPath( " ~/App_Data/data.xsd " )); 
dataSet.ReadXml(Server.MapPath( " ~/App_Data/data.xml " )); 
var dataView  = new  DataView(dataSet.Tables[ 0 ]); 
var key  = new  Chart(width:  600 , height:  400 ) 
.AddTitle( " Sales Per Employee " ) 
.AddSeries( " Default " , chartType:  " Pie " , 
xValue: dataView, xField:  " Name " , 
yValues: dataView, yFields:  " Sales " ) 
.Write(); 
}
复制代码
 由于这三种方式都类似，了解其中一种，其余的类似，就不细说了，为了简单起见，下面的例子都是用数组的方式来实现。
2、Chart的显示：
chartType属性：它有一个chartType属性，可以定义显示的方式。比如将上面的例子的chartType定义为"Pie"，就显示为饼图。
复制代码
@{ 
var key  = new  Chart(width:  600 , height:  400 ) 
.AddTitle( " 人员流动情况 " ) 
.AddSeries(name:  " Employee " ,chartType:  " Pie " , xValue:  new [] {  " 一月份 " ,  " 二月份 " ,  " 三月份 " ,  " 四月份 " ,  " 五月份 " ,  " 六月份 " ,  " 七月份 " ,  " 八月份 " ,  " 九月份 " }, yValues:  new [] {  " 2 " ,  " 6 " ,  " 4 " ,  " 5 " ,  " 3 " , " 4 " , " 9 " , " 2 " , " 5 " }) 
.Write(); 
}
复制代码
 效果：
 
template属性：它可以定义背景模板，如修改代码为：template: ChartTheme.Green
复制代码
代码
@{
var key  = new  Chart(width:  600 , height:  400 ,template: ChartTheme.Green)
.AddTitle( " 人员流动情况 " )
.AddSeries(name:  " Employee " ,xValue:  new [] {  " 一月份 " ,  " 二月份 " ,  " 三月份 " ,  " 四月份 " ,  " 五月份 " ,  " 六月份 " ,  " 七月份 " ,  " 八月份 " ,  " 九月份 " }, yValues:  new [] {  " 2 " ,  " 6 " ,  " 4 " ,  " 5 " ,  " 3 " , " 4 " , " 9 " , " 2 " , " 5 " })
.Write();
}
复制代码
效果：
3、Chart保存
  将Chart保存到缓存中：看下面代码：
复制代码
代码
@{ 
var chartKey  =  Request[ " key " ]; 
 if  (chartKey  != null ) 
{ 
var cachedChart  =  Chart.GetFromCache(key: chartKey); 
 if  (cachedChart  == null ) 
{ 
cachedChart  = new  Chart( 600 ,  400 ); 
cachedChart.AddTitle( " Cached Chart -- Cached at  " +  DateTime.Now); 
cachedChart.AddSeries( 
name:  " Employee " , 
axisLabel:  " Name " , 
xValue:  new [] {  " 一月份 " ,  " 二月份 " ,  " 三月份 " ,  " 四月份 " ,  " 五月份 " ,  " 六月份 " ,  " 七月份 " ,  " 八月份 " ,  " 九月份 " }, 
yValues:  new [] {  " 2 " ,  " 6 " ,  " 4 " ,  " 5 " ,  " 3 " , " 4 " , " 9 " , " 2 " , " 5 " }); 
cachedChart.SaveToCache(key: chartKey,minutesToCache:  2 ,slidingExpiration:  false ); 
} 
Chart.WriteFromCache(chartKey); 
} 
}
复制代码
Chart.GetFromCache(key: chartKey)将根据key从缓存中取出Chart，cachedChart.SaveToCache(key: chartKey,minutesToCache: 2,slidingExpiration: false)是将Chart缓存起来。看下图：
 
当再次请求的时候，就直接从缓存中取数据。设置缓存两分钟，两分钟之后这次的缓存失效。
 将Chart保存为图片：
使用下面代码将图形保存为图片：
复制代码
@{
var filePathName  = " _ChartFiles/chart01.jpg " ;
 if  ( ! File.Exists(Server.MapPath(filePathName)))
{
var chartImage  = new  Chart( 600 ,  400 );
chartImage.AddTitle( " Chart Title " );
chartImage.AddSeries(
name:  " Employee " ,
axisLabel:  " Name " ,
xValue:  new [] {  " 一月份 " ,  " 二月份 " ,  " 三月份 " ,  " 四月份 " ,  " 五月份 " ,  " 六月份 " ,  " 七月份 " ,  " 八月份 " ,  " 九月份 " },
yValues:  new [] {  " 2 " ,  " 6 " ,  " 4 " ,  " 5 " ,  " 3 " , " 4 " , " 9 " , " 2 " , " 5 " });
chartImage.Save(path: filePathName);
}
}
复制代码
保存之后的图片：
将Chart保存为保存为XML：
复制代码
@{ Chart chartXml;
var filePathName  = " _ChartFiles/XmlChart.xml " ;
 if  (File.Exists(Server.MapPath(filePathName)))
{
chartXml  = new  Chart(width:  600 ,height:  400 ,templatePath: filePathName);
}
 else  {
chartXml  = new  Chart(width:  600 ,height:  400 );
chartXml.AddTitle( " Chart Title -- Saved at  " +  DateTime.Now);
chartXml.AddSeries(
name:  " Employee " ,
axisLabel:  " Name " ,
xValue:  new [] {  " 一月份 " ,  " 二月份 " ,  " 三月份 " ,  " 四月份 " ,  " 五月份 " ,  " 六月份 " ,  " 七月份 " ,  " 八月份 " ,  " 九月份 " },
yValues:  new [] {  " 2 " ,  " 6 " ,  " 4 " ,  " 5 " ,  " 3 " , " 4 " , " 9 " , " 2 " , " 5 " });
chartXml.SaveXml(path: filePathName);
}
chartXml.Write();
}
复制代码
 从上面代码我们可以看到，可以通过templatePath将XML转换成Chart。通过SaveXml可以将Chart保存为XML。生成的XML如下：
复制代码
代码
< Chart  Width ="600"  Height ="400" >
< Series >
< Series  Name ="Employee"  XValueType ="String"  YValueType ="String"  ChartArea ="Default"  AxisLabel ="Name" >
< Points >
< DataPoint  YValues ="2"  AxisLabel ="一月份" />
< DataPoint  YValues ="6"  AxisLabel ="二月份" />
< DataPoint  YValues ="4"  AxisLabel ="三月份" />
< DataPoint  YValues ="5"  AxisLabel ="四月份" />
< DataPoint  YValues ="3"  AxisLabel ="五月份" />
< DataPoint  YValues ="4"  AxisLabel ="六月份" />
< DataPoint  YValues ="9"  AxisLabel ="七月份" />
< DataPoint  YValues ="2"  AxisLabel ="八月份" />
< DataPoint  YValues ="5"  AxisLabel ="九月份" />
</ Points >
</ Series >
</ Series >
< ChartAreas >
< ChartArea  Name ="Default" >
</ ChartArea >
</ ChartAreas >
< Titles >
< Title  Name ="Title1"  Text ="Chart Title -- Saved at 2010/10/19 23:41:02" >
</ Title >
</ Titles >
</ Chart >
复制代码
总结：本文就三个方面介绍了ASP.NET MVC 3 Beta中的Chart。包括它的数据源配置、显示以及保存。




本文转自麒麟博客园博客，原文链接：http://www.cnblogs.com/zhuqil/archive/2010/10/20/asp-net-mvc-3-chart.html，如需转载请自行联系原作者
文章标签：
DataV数据可视化
前端开发
缓存
.NET
数据格式
XML
数据库
开发框架
关键词：
.NET mvc
.NET chart
ASP MVC
ASP.NET mvc
mvc asp.net
相关实践学习
基于Hologres轻量实时的高性能OLAP分析
本教程基于GitHub Archive公开数据集，通过DataWorks将GitHub中的项⽬、行为等20多种事件类型数据实时采集至Hologres进行分析，同时使用DataV内置模板，快速搭建实时可视化数据大屏，从开发者、项⽬、编程语⾔等多个维度了解GitHub实时数据变化情况。
阿里云实时数仓实战 - 用户行为数仓搭建
课程简介 1)学习搭建一个数据仓库的过程，理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上，理解并学会运用各个服务组件，了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求：熟练掌握 SQL 语法熟悉 Linux 命令，对 Hadoop 大数据体系有一定的了解 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准，准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
技术mix呢
目录
相关文章
杀死一只知更鸟debug
|
C#
winform .net6 和 framework 的图表控件，为啥项目中不存在chart控件，该如何解决？
本文讨论了在基于.NET 6和.NET Framework的WinForms项目中添加图表控件的不同方法。由于.NET 6的WinForms项目默认不包含Chart控件，可以通过NuGet包管理器安装如ScottPlot等图表插件。而对于基于.NET Framework的WinForms项目，Chart控件是默认存在的，也可以通过NuGet安装额外的图表插件，例如LiveCharts。文中提供了通过NuGet添加图表控件的步骤和截图说明。
杀死一只知更鸟debug
882 0
winform .net6 和 framework 的图表控件，为啥项目中不存在chart控件，该如何解决？
亚丁号
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
亚丁号
384 0
二二*一一
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
二二*一一
199 7
Echo_Wish
|
存储 开发框架 前端开发
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
Echo_Wish
219 0
VipSoft
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
VipSoft
165 0
代码掌控者
|
开发框架 前端开发 安全
ASP.NET MVC 如何使用 Form Authentication?
ASP.NET MVC 如何使用 Form Authentication?
代码掌控者
297 0
VipSoft
|
开发框架 .NET
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
VipSoft
409 0
老码识途
|
存储 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(五)
经过一段时间的准备，新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始，在之前的文章中，讲解了商城系统的整体功能设计，页面布局设计，环境搭建，系统配置，及首页【商品类型，banner条，友情链接，降价促销，新品爆款】，商品列表页面，商品详情等功能的开发，今天继续讲解购物车功能开发，仅供学习分享使用，如有不足之处，还请指正。
老码识途
262 0
老码识途
|
开发框架 前端开发 .NET
[回馈]ASP.NET Core MVC开发实战之商城系统(一)
[回馈]ASP.NET Core MVC开发实战之商城系统(一)
老码识途
346 0
GoodTime
|
开发框架 前端开发 .NET
C# .NET面试系列六：ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中，TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制，但它们有一些区别。 <b>TempData：</b> 1、生命周期 ```c# TempData 的生命周期是短暂的，数据只在当前请求和下一次请求之间有效。一旦数据被读取，它就会被标记为已读，下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据，例如在一个动作中设置 TempData，然后在重定向到另
GoodTime
518 5