用C#构造HighChart类库，把数据转换成JSON第二阶段完成50%API，已经能满足项目要求了

     上一周写过一篇文章，写是关于这个类库的，只是当时没有设计，只是安装API去写了，当写一部分后，发现这样写下去类会难以维护，就停下来，重新设计一下，再去开发，所有的开发都是根据API进行的。

     现在来介绍一下情况，对API了解之后，就会发现里面有很多对象都是重用的，就写下了如下基类（只是部分）

    

下面来介绍一下要构造HighChart需要多少元素呢？先看一个API上的对象

根据API和项目要求我只完成部分API上的功能

下面是Demo构造HightChart的JS代码

<script type="text/javascript">
$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Monthly Average Rainfall'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Rainfall (mm)'
                }
            },
            legend: {
                layout: 'vertical',
                backgroundColor: '#FFFFFF',
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 70
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.x +': '+ this.y +' mm';
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
                series: [{
                name: 'Tokyo',
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    
            }, {
                name: 'New York',
                data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
    
            }, {
                name: 'London',
                data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
    
            }, {
                name: 'Berlin',
                data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
    
            }]
        });
    });
    
});
        </script>

为了能构造这样的代码我选择用HttpHandler来序列化对象，同时还要借助Newtonsoft.Json来序列化Highchart对象

HttpHandler 代码

private DataLabels _dataLabels;
        private Style _style = new Style();
        private AxisLabels _axisLabels;
        public void ProcessRequest(HttpContext context)
        {
            #region Chart
            Chart chart = new Chart();
            chart.type = ChartType.column.ToString();
            chart.marginRight = 150;
            chart.marginTop = 100;
            #endregion

            #region Title
            _style = new Style();
            _style.cursor = "";
            _style.fontSize = "20px";
            _style.fontWeight = "bold";
            Title title = new Title();
            title.text = "Column Basic";
            title.y = 10;
            title.style = _style;
            #endregion

            #region SubTitle
            _style = new Style();
            _style.cursor = "";
            _style.fontSize = "12px";
            SubTitle subTitle = new SubTitle();
            subTitle.text = "SubTitle:Column";
            subTitle.y = 30;
            subTitle.style = _style;
            #endregion

            #region XAxis
            _axisLabels = new AxisLabels();
            _axisLabels.rotation = 0;
            _axisLabels.style = _style;
            _axisLabels.x = -5;
            _axisLabels.y = 15;

            XAxis xAxis = new XAxis();
            xAxis.categories = SetXAxisCategory();
            xAxis.labels = _axisLabels;
            #endregion

            #region YAxis
            _axisLabels = new AxisLabels();
            _axisLabels.align = "right";
            _axisLabels.rotation = 0;
            _axisLabels.style = _style;
            _axisLabels.x = -8;
            _axisLabels.y = 3;
            YAxis yAxis = new YAxis();
            YAxisTitle yAxisTitle = new YAxisTitle();
            yAxisTitle.text = "";
            yAxis.min = 0;
            yAxis.title = yAxisTitle;
            yAxis.labels = _axisLabels;
            #endregion

            #region ToolTip
            ToolTip toolTip = new ToolTip();
            toolTip.formatter = "";
            #endregion

            #region Series
            List<Series> seriesList = new List<Series>();
            Series series = new Series();
            _dataLabels = new DataLabels();
            //_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;
            legend.width = 100;
            #endregion

            #region PlotOptions


            _dataLabels = new DataLabels();
            _dataLabels.enabled = false;
            _dataLabels.color = Colors.color[2];
            _dataLabels.style = _style;

            PlotOptionsColumn plotOptionsColumn = new PlotOptionsColumn();
            plotOptionsColumn.borderWidth = 0;
            plotOptionsColumn.pointPadding = 0.2;
            plotOptionsColumn.dataLabels = _dataLabels;

            PlotOptions plotOptions = new PlotOptions();
            plotOptions.column = plotOptionsColumn;
            #endregion

            #region Credits
            Style _styleCredits = new Style();
            _styleCredits.fontSize = "14px";
            _styleCredits.color = "Red";
            _styleCredits.fontWeight = "bold";
            Credits credits = new Credits();
            credits.text = "作者：一统";
            credits.href = "http://www.cnblogs.com/fengger";
            credits.style = _styleCredits;
            #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;
            hc.symbols = SetSymbols();
            #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

        #region symbols
        private List<string> SetSymbols()
        {
            List<string> list = new List<string>();
            list.Add("circle");
            list.Add("diamond");
            list.Add("square");
            list.Add("triangle");
            list.Add("triangle-down");
            return list;
        }
        #endregion

在aspx页面调用如下

<head runat="server">
    <title>Column Basic</title>
    <script src="Highcharts/js/jquery-mini-1.7.1.js" type="text/javascript"></script>
    <script src="Highcharts/js/highcharts.js" type="text/javascript"></script>
    <script src="Highcharts/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;
                        }

                        result.xAxis.labels.formatter = function () {
                            return this.value;
                        }

                        result.yAxis.labels.formatter = function () {
                            return this.value;
                        }

                        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>

之后再展示一下效果图

目前有几个棘手的问题还没有解决

当X轴文字多的时候就会出现如下问题，不知如何解决，对应的Aspx页面为 column_rotated_labels.aspx

还有一个就是 对象的 formatter 属性对应的是JS方法，不知如何再 C#类库里面实例，目前只能通过在JS里面实例，

<script language="javascript" type="text/javascript">
        $(function () {
            var chartBar;
            $(document).ready(function () {
                $.ajax({
                    type: 'post',
                    cache: false,
                    dataType: 'json',
                    url: 'Handler/column_rotated_labels.ashx',
                    success: function (result) {
                        //ToolTip formatter
                        result.tooltip.formatter = function () {
                            return '' + this.x + ': ' + this.y;
                        }
                        result.xAxis.labels.formatter = function () {
                            return this.value;
                        }

                        result.yAxis.labels.formatter = function () {
                            return this.value;
                        }

                        chartBar = new Highcharts.Chart(result);
                    },
                    error: function () {

                    },
                    beforeSend: function () {

                    },
                    complete: function () {

                    }
                });
            })
        })

为了给其他兄弟做参考，提供下载