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 = new Data(datas)//数据区

               });

            return chart;
        }
    }

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="../../Scripts/jquery-2.0.0.js"></script>
	    <script src="../../Scripts/Highcharts-4.0.1/js/highcharts.js"></script>
	@{
	    ViewBag.Title = "PieChart";
	}
	@(Model)

这样基本样式图就已经完成，我们看看效果图

小结：

服务端的数据绘制，代码习惯操作简便了不少，但是带来的问题也是相当的，如：对图形的一些特性添加都要进行编译，不是一个很好的选择，但是对于固定的图形，不失为一个好的选择。下篇介绍客户端异步请求获取图形。

开源网址：http://dotnethighcharts.codeplex.com/