首页 > 代码库 > HightChars组件绘制图表
HightChars组件绘制图表
在Web项目开发过程中,我们常常会使用到各类图形,如流程图,饼图,甘特图,散列图,趋势图等等。目前有很多种方法在网页上绘制图形,但是要找到完美的web图形解决方案是比较难的,只能是根据自己的需要,选择自己最合适的画图方案
Web图表一般有以下几种做法:
1.使用客户端控件技术
2.使用服务器端生成图片
3.使用富客户端技术
这里我重点说下服务端生成图片,直接在web服务器端生成好图表图片文件后发送给浏览器。
由于浏览器绘制图形存在一定困难,所以在服务端动态生成图片是一种较好的解决方案。
优点:纯服务端代码编写,服务端生成图形,减轻客户端负担。
缺点: Web应用时,特别是动态生成图片,会产生大量的冗余图片数据。
区域作图
我这里使用的是DotNet.HighCharts。DotNet.HighCharts是一个开源的JS图标库,支持线型图表、柱状图标、饼状图标等几十种图标
准备:
1 首先安装NuGe
工具栏目/扩展与更新/联机/NuGet Package Manager。具体什么作用再解释
2 安装组件
打开程序包管理控制台方法 Tools/库程序包管理器/程序包管理控制台
在控制台中输入Install-Package DotNet.Highcharts
在联网情况下将自动安装DotNet.Highcharts的组建与js库
代码操作
Highcharts有不同的图形。这里就用饼形图做实例
1建立数据图形类
引入命名空间 using DotNet.Highcharts; using DotNet.Highcharts.Enums; using DotNet.Highcharts.Helpers; using DotNet.Highcharts.Options; public class HightcharsN { public static Highcharts Pichar(object[]datas,string title,string seriesName) { //图形控制区 Highcharts chart = new Highcharts("chart") .InitChart(new Chart { PlotShadow = false }) .SetTitle(new Title { Text = title })//标题 //鼠标移动浮标 .SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }" }) //数据点相关属性 .SetPlotOptions(new PlotOptions { Pie = new PlotOptionsPie { AllowPointSelect = true, Cursor = Cursors.Pointer, DataLabels = new PlotOptionsPieDataLabels { Color = ColorTranslator.FromHtml("#000000"), ConnectorColor = ColorTranslator.FromHtml("#000000"), // Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }"//数据浮标 } } }) //数据列选项 .SetSeries(new Series { Type = ChartTypes.Pie, Name = seriesName, Data = http://www.mamicode.com/new Data(datas)//数据区>2 Control传入数据区域
public ActionResult PieChart() { PriceDao price = new PriceDao(); var sdf = price.ProducePrices().ToArray(); object[] datas = (from sdfee in sdf select new { Name = sdfee.CommodityName, Y = (int)sdfee.Power }).ToArray();//准备数据,对象数组 return View(HightcharsN.Pichar(datas,"电器统计占用比例, 2014" ,"电器统计占用比例")); }3创建页面
页面创建空的模型,引入相关的js @model DotNet.Highcharts.Highcharts <script src=http://www.mamicode.com/Scripts/jquery-2.0.0.js"></script>>这样基本样式图就已经完成,我们看看效果图
小结:
服务端的数据绘制,代码习惯操作简便了不少,但是带来的问题也是相当的,如:对图形的一些特性添加都要进行编译,不是一个很好的选择,但是对于固定的图形,不失为一个好的选择。下篇介绍客户端异步请求获取图形。
开源网址:http://dotnethighcharts.codeplex.com/
HightChars组件绘制图表