用C#构造HighChart类库，把数据转换成JSON---第一阶段失败告终
最近在做项目，用到了HighChart，主要用于图表展现，深入了解时，发现HighCHart数据格式是JSON，就想用C#构造一个JSON类库，这样方便数据在后台传递，有了这个想法，就开始行了，结果发现，困难重重，没有想想的哪么简单。
目前开发状况，基本的数据传递都可以实现了，但是在开始开发的时候没有进行合理规划，每个类都是和API一样，这样造成了类的不能重用，维护成本更高，举个简单的例子，在API里面有YAsxis和XAxis两个对象，目前的做法是把他们当做两个对象来操作，没有基本，其实这两个对象里面的属性基本上是一样的，在这里面添加后，还要在另一个里面添加，这样增加了开发成本，同时也增加了维护成本，与此同时，最近也在深入了解一些基础知识，比如 抽象类与接口 ，值类型与引用类型，之后发现自己的设计太差，如果继续开发下去，后面的问题会更多，最终选择放弃开发，重新设计后，再开发。
通过对抽象类的了解后，上面有关YAsxis和XAxis两个对象，如何设计已经很明确了，可以把Axis做为基本，之后YAxis和XAxis继承Axis，这样设计避免重复的属性在多个类中实现。
写这篇文章的主要原因是，基础知识目前还有欠缺，在实际的项目开发当中，一般不用到抽象类、接口、值与引用类型，但是这都是基础，如果不明天他们的差别，在项目开发过程中一但遇到，就会有不必要的问题出现，以前自己水平有限，对这些基础理解不了，但是在找工作时，面试人员都会问到这些基础，所以在面试前就把这些东西哪出来背一下，应付一下面试，（自己在想，反正在开发过程当中用不到，应付一下就可以了）随着开发经验的增加，开始重视这方面的基础了，发现在做设计时，如果设计不好，会给开发带来很多问题，目前这个HighChart类库开发，就已经证明这一点了，好的设计更容易开发与维护。
简单的基础知识，对于初学者来说还是有一点难度的，难在于如何运用，当初我学习的时候，感觉很简单，但是就是记不住，主要原因是不知道如何运用，目前再次深入研究时，才发现原来是这个道理啊，当你知道用到何处时，他将会变得很简单。
说了很多一直没有讲自己写的类库，现在给大家分享一下类库
类库没有基类，这样对于维护很不好，原因请自己深入了解一下抽象类
下面是批处理文件，构造数据源，用于Jquery的Ajax调用
下面看一下Column_Basic的代码
View Code
using System; using System.Collections.Generic; using System.Linq; using System.Web; using T.HighCharts; using Newtonsoft.Json; namespace WebApp.Handler { /// <summary> /// Column_Basic 的摘要说明 /// </summary> public class Column_Basic : IHttpHandler { private DataLables _dataLables; public void ProcessRequest(HttpContext context) { #region Chart Chart chart = new Chart(); chart.type = ChartType.column.ToString(); chart.marginRight = 150; #endregion #region Title Title title = new Title(); title.text = "Column Basic"; #endregion #region SubTitle SubTitle subTitle = new SubTitle(); subTitle.text = "SubTitle:Column"; #endregion #region XAxis XAxis xAxis = new XAxis(); xAxis.categories = SetXAxisCategory(); #endregion #region YAxis YAxis yAxis = new YAxis(); YAxisTitle yAxisTitle = new YAxisTitle(); yAxisTitle.text = "Rainfall (mm)"; yAxis.min = 0; yAxis.title = yAxisTitle; #endregion #region ToolTip ToolTip toolTip = new ToolTip(); toolTip.formatter = ""; #endregion #region Series List<Series> seriesList = new List<Series>(); Series series = new Series(); _dataLables=new DataLables(); //_dataLables.enabled = true; series.name = "Tokyo"; series.data = SetSeriesData(); //series.dataLabels = _dataLables; seriesList.Add(series); series = new Series(); series.name = "New York"; series.data = SetSeriesData(); //series.dataLabels = _dataLables; seriesList.Add(series); series = new Series(); series.name = "London"; series.data = SetSeriesData(); //series.dataLabels = _dataLables; seriesList.Add(series); #endregion #region Legend Legend legend = new Legend(); legend.align = "right"; legend.verticalAlign = "middle"; legend.layout = "vertical"; legend.enabled = true; #endregion #region PlotOptions PlotOptions plotOptions = new PlotOptions(); PlotOptionsPoint plotOptionsPoint = new PlotOptionsPoint(); PlotOptionsEvents events = new PlotOptionsEvents(); plotOptionsPoint.events = events; _dataLables = new DataLables(); _dataLables.enabled = false; _dataLables.color = Colors.color[2]; PlotOptionsColumn plotOptionsColumn = new PlotOptionsColumn(); plotOptions.column = plotOptionsColumn; plotOptionsColumn.borderWidth = 0; plotOptionsColumn.pointPadding = 0.2; plotOptionsColumn.point = plotOptionsPoint; plotOptionsColumn.dataLabels = _dataLables; #endregion #region Credits Credits credits=new Credits(); credits.text = "一统"; credits.href = "http://www.cnblogs.com/fengger"; #endregion #region HighChart HighChart hc = new HighChart(); hc.chart = chart; hc.title = title; hc.subtitle = subTitle; hc.tooltip = toolTip; hc.xAxis = xAxis; hc.yAxis = yAxis; hc.series = seriesList; hc.legend = legend; hc.plotOptions = plotOptions; //hc.credits = credits; #endregion string output = JsonConvert.SerializeObject(hc, Formatting.None); context.Response.ContentType = "text/plain"; context.Response.Write(output); context.Response.End(); } #region XAxis Category private List<string> SetXAxisCategory() { List<string> list = new List<string>(); list.Add("Jan"); list.Add("Feb"); list.Add("Mar"); list.Add("Apr"); list.Add("May"); list.Add("Jun"); list.Add("Jul"); list.Add("Aug"); list.Add("Sep"); list.Add("Oct"); list.Add("Nov"); list.Add("Dec"); return list; } #endregion #region Series Data Random r = new Random(); private List<SeriesData> SetSeriesData() { List<SeriesData> dataList = new List<SeriesData>(); SeriesData data; for (int i = 0; i < 12; i++) { data = new SeriesData(); data.y = Math.Ceiling(r.NextDouble() * 100); dataList.Add(data); } return dataList; } #endregion public bool IsReusable { get { return false; } } } }
下面介绍一下如何在HTML页面里面如何通过Jquery调用.ashx里面的返回数据，在调用方法前要引用Hightchart.js与Jquery.js
详细代码如下：
View Code
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Column Basic</title> <script src="js/jquery-mini-1.7.1.js" type="text/javascript"></script> <script src="js/highcharts.js" type="text/javascript"></script> <script src="js/modules/exporting.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(function () { var chartBar; $(document).ready(function () { $.ajax({ type: 'post', cache: false, dataType: 'json', url: '../Handler/Column_Basic.ashx', success: function (result) { //ToolTip formatter result.tooltip.formatter = function () { return '' + this.x + ': ' + this.y + ' mm'; } result.subtitle.text = result.series[0].data[0].y; chartBar = new Highcharts.Chart(result); }, error: function () { }, beforeSend: function () { }, complete: function () { } }); }) }) </script> </head> <body> <form id="form1" runat="server"> <div id="Container"> </div> </form> </body> </html>
效果图，更多效果图，请去官方网站对了解
最后，要告诉哪些像我一样，不注重基础知识的兄弟们，好好的学习一下基础知识，这次学习要用心，毕竟不是刚毕业的学生了，为了发展的更好，为了......好好深入学习一下基础知识，当你认真时，会有意想不到的收获，如果还是没有任何收获有两种可能，其一：已经非常熟悉了，哪也就没有必要再学习了，其二：就是说明你还不够认真。
