zoukankan      html  css  js  c++  java
  • 用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 () {
    
                        }
                    });
                })
            })

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


     

  • 相关阅读:
    cf B. Sereja and Suffixes
    cf E. Dima and Magic Guitar
    cf D. Dima and Trap Graph
    cf C. Dima and Salad
    最短路径问题(floyd)
    Drainage Ditches(网络流(EK算法))
    图结构练习—BFSDFS—判断可达性(BFS)
    Sorting It All Out(拓扑排序)
    Power Network(最大流(EK算法))
    Labeling Balls(拓扑)
  • 原文地址:https://www.cnblogs.com/Fengger/p/2602360.html
Copyright © 2011-2022 走看看