用C#构造HighChart类库，把数据转换成JSON第一阶段失败告终

     最近在做项目，用到了HighChart，主要用于图表展现，深入了解时，发现HighCHart数据格式是JSON，就想用C#构造一个JSON类库，这样方便数据在后台传递，有了这个想法，就开始行了，结果发现，困难重重，没有想想的哪么简单。

     目前开发状况，基本的数据传递都可以实现了，但是在开始开发的时候没有进行合理规划，每个类都是和API一样，这样造成了类的不能重用，维护成本更高，举个简单的例子，在API里面有YAsxis和XAxis两个对象，目前的做法是把他们当做两个对象来操作，没有基本，其实这两个对象里面的属性基本上是一样的，在这里面添加后，还要在另一个里面添加，这样增加了开发成本，同时也增加了维护成本，与此同时，最近也在深入了解一些基础知识，比如 抽象类与接口 ，值类型与引用类型，之后发现自己的设计太差，如果继续开发下去，后面的问题会更多，最终选择放弃开发，重新设计后，再开发。

      通过对抽象类的了解后，上面有关YAsxis和XAxis两个对象，如何设计已经很明确了，可以把Axis做为基本，之后YAxis和XAxis继承Axis，这样设计避免重复的属性在多个类中实现。

     写这篇文章的主要原因是，基础知识目前还有欠缺，在实际的项目开发当中，一般不用到抽象类、接口、值与引用类型，但是这都是基础，如果不明天他们的差别，在项目开发过程中一但遇到，就会有不必要的问题出现，以前自己水平有限，对这些基础理解不了，但是在找工作时，面试人员都会问到这些基础，所以在面试前就把这些东西哪出来背一下，应付一下面试，（自己在想，反正在开发过程当中用不到，应付一下就可以了）随着开发经验的增加，开始重视这方面的基础了，发现在做设计时，如果设计不好，会给开发带来很多问题，目前这个HighChart类库开发，就已经证明这一点了，好的设计更容易开发与维护。

     简单的基础知识，对于初学者来说还是有一点难度的，难在于如何运用，当初我学习的时候，感觉很简单，但是就是记不住，主要原因是不知道如何运用，目前再次深入研究时，才发现原来是这个道理啊，当你知道用到何处时，他将会变得很简单。

    说了很多一直没有讲自己写的类库，现在给大家分享一下类库

    

类库没有基类，这样对于维护很不好，原因请自己深入了解一下抽象类

下面是批处理文件，构造数据源，用于Jquery的Ajax调用

下面看一下Column_Basic的代码

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

详细代码如下：

<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>

效果图，更多效果图，请去官方网站对了解

   最后，要告诉哪些像我一样，不注重基础知识的兄弟们，好好的学习一下基础知识，这次学习要用心，毕竟不是刚毕业的学生了，为了发展的更好，为了......好好深入学习一下基础知识，当你认真时，会有意想不到的收获，如果还是没有任何收获有两种可能，其一：已经非常熟悉了，哪也就没有必要再学习了，其二：就是说明你还不够认真。