上一周写过一篇文章，写是关于这个类库的，只是当时没有设计，只是安装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 () { } }); }) })
