用C#构造HighChart类库,把数据转换成JSON---第一阶段失败告终
最近在做项目,用到了HighChart,主要用于图表展现,深入了解时,发现HighCHart数据格式是JSON,就想用C#构造一个JSON类库,这样方便数据在后台传递,有了这个想法,就开始行了,结果发现,困难重重,没有想想的哪么简单。
目前开发状况,基本的数据传递都可以实现了,但是在开始开发的时候没有进行合理规划,每个类都是和API一样,这样造成了类的不能重用,维护成本更高,举个简单的例子,在API里面有YAsxis和XAxis两个对象,目前的做法是把他们当做两个对象来操作,没有基本,其实这两个对象里面的属性基本上是一样的,在这里面添加后,还要在另一个里面添加,这样增加了开发成本,同时也增加了维护成本,与此同时,最近也在深入了解一些基础知识,比如 抽象类与接口 ,值类型与引用类型,之后发现自己的设计太差,如果继续开发下去,后面的问题会更多,最终选择放弃开发,重新设计后,再开发。
通过对抽象类的了解后,上面有关YAsxis和XAxis两个对象,如何设计已经很明确了,可以把Axis做为基本,之后YAxis和XAxis继承Axis,这样设计避免重复的属性在多个类中实现。
写这篇文章的主要原因是,基础知识目前还有欠缺,在实际的项目开发当中,一般不用到抽象类、接口、值与引用类型,但是这都是基础,如果不明天他们的差别,在项目开发过程中一但遇到,就会有不必要的问题出现,以前自己水平有限,对这些基础理解不了,但是在找工作时,面试人员都会问到这些基础,所以在面试前就把这些东西哪出来背一下,应付一下面试,(自己在想,反正在开发过程当中用不到,应付一下就可以了)随着开发经验的增加,开始重视这方面的基础了,发现在做设计时,如果设计不好,会给开发带来很多问题,目前这个HighChart类库开发,就已经证明这一点了,好的设计更容易开发与维护。
简单的基础知识,对于初学者来说还是有一点难度的,难在于如何运用,当初我学习的时候,感觉很简单,但是就是记不住,主要原因是不知道如何运用,目前再次深入研究时,才发现原来是这个道理啊,当你知道用到何处时,他将会变得很简单。
说了很多一直没有讲自己写的类库,现在给大家分享一下类库
类库没有基类,这样对于维护很不好,原因请自己深入了解一下抽象类
下面是批处理文件,构造数据源,用于Jquery的Ajax调用
下面看一下Column_Basic的代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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
详细代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
效果图,更多效果图,请去官方网站对了解
最后,要告诉哪些像我一样,不注重基础知识的兄弟们,好好的学习一下基础知识,这次学习要用心,毕竟不是刚毕业的学生了,为了发展的更好,为了......好好深入学习一下基础知识,当你认真时,会有意想不到的收获,如果还是没有任何收获有两种可能,其一:已经非常熟悉了,哪也就没有必要再学习了,其二:就是说明你还不够认真。