首页 > 代码库 > 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组件绘制图表