用C#構造HighChart類庫,把數據轉換成JSON---第二階段完成50%API,已經能滿足項目要求了


     上一周寫過一篇文章,寫是關於這個類庫的,只是當時沒有設計,只是安裝API去寫了,當寫一部分后,發現這樣寫下去類會難以維護,就停下來,重新設計一下,再去開發,所有的開發都是根據API進行的。

     現在來介紹一下情況,對API了解之后,就會發現里面有很多對象都是重用的,就寫下了如下基類(只是部分)

    

下面來介紹一下要構造HighChart需要多少元素呢?先看一個API上的對象

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

下面是Demo構造HightChart的JS代碼

View Code
<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 代碼

View Code
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頁面調用如下

View Code
<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 () {

                    }
                });
            })
        })

為了給其他兄弟做參考,提供下載


 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com