最近在做項目，用到了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>
效果圖，更多效果圖，請去官方網站對了解
最后，要告訴哪些像我一樣，不注重基礎知識的兄弟們，好好的學習一下基礎知識，這次學習要用心，畢竟不是剛畢業的學生了，為了發展的更好，為了......好好深入學習一下基礎知識，當你認真時，會有意想不到的收獲，如果還是沒有任何收獲有兩種可能，其一：已經非常熟悉了，哪也就沒有必要再學習了，其二：就是說明你還不夠認真。