Highcharts图形报表的简单使用
Highcharts是一个纯JavaScript框架，与MSChart完全不一样，
可以在网页中使用，所以php、asp.net、jsp等等页面中都可以使用。
Highcharts官网：http://www.highcharts.com/
可以在官网下载对应的版本：
下载后文件夹里面的内容如图(我这里下载的是4.1.5版本)：
这里面有几个文件夹大家要知道：
api：api文档文件夹
examples：里面是例子，大家可以通过这些例子来学习
js：要使用的一些脚本文件
Highchart属性比较多，可以查看API，但不建议大家死记硬背，大家也可以直接在官网上去看例子代码，然后自己去修改里面的代码来看结果，来理解不同属性的作用。
进入官网例子页面：
官网例子页面：里面有很多的例子，可以点进去查看代码
进入例子以后，点击"EDIT IN JSFIDDLE"按钮：
可以看到代码和效果图：
大家可以修改左边的代码，然后点击左上角的"Run"按钮就可以再右边看到相应效果，这样就能知道属性的作用，大家可以通过例子来进行学习。
Highcharts使用的基本步骤：
1、引入jquery脚本文件
2、引入highcharts脚本文件
如果还有其他要求可以引入其他脚本文件(例如：想要添加导出功能，只需要引入modules下的exporting.js)。
引入的脚本代码如下：
<script src="jquery1.8/jquery-1.8.0.js" type="text/javascript"></script>
<script src="highCharts/highcharts.js" type="text/javascript"></script>
接下来就是初始化Highcharts图形报表，代码可以直接参考官网(前面有介绍)。
先看一个简单的例子，数据是固定的：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highcharts Example</title> <script src="jquery1.8/jquery-1.8.0.js" type="text/javascript"></script> <script src="highCharts/highcharts.js" type="text/javascript"></script> <script src="highCharts/modules/exporting.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#container').highcharts({ title: { text: 'Monthly Average Temperature', x: 20 //center }, subtitle: { text: 'Source: WorldClimate.com', x: -20 }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: { text: 'Temperature (°C)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { valueSuffix: '°C' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }, { name: 'Berlin', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] }, { name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }] }); }); </script> </head> <body> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"> </div> </body> </html>
结果：
接下来看看从数据库里面拿数据显示出来(这里是使用jquery ajax提交给一个aspx页面)：
html页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="jquery1.8/jquery-1.8.0.js" type="text/javascript"></script> <script src="highCharts/highcharts.js" type="text/javascript"></script> <script type="text/javascript"> var chart; $(document).ready(function () { chart = new Highcharts.Chart({ chart: { renderTo: 'container', defaultSeriesType: 'spline' }, title: { text: '销售情况' }, xAxis: { categories: [] }, yAxis: { minPadding: 0.2, maxPadding: 0.2, title: { text: '销售量', margin: 80 } }, series: [{ name: '销售', data: [] }] }); }); function requestData() { $.ajax({ url: 'GetMessage.aspx', success: function (point) { var series = chart.series[0]; shift = series.data.length > 10; var result = point.split("&"); for (var i = 0; i < result.length; i++) { chart.series[0].addPoint(eval(result[i]), true, shift); } }, cache: false }); } </script> </head> <body> <input type="button" value="查看数据" onclick="requestData()" /> <br /> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"> </div> </body> </html>
aspx页面后置代码：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data.SqlClient; using System.Data; using System.Text; namespace HighchartTest { public partial class GetMessage : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string sql = "select * from Sale"; SqlConnection conn = new SqlConnection("server=.;database=MSChartDB;uid=sa;pwd=sasa"); SqlDataAdapter sda = new SqlDataAdapter(sql,conn); DataTable table = new DataTable(); sda.Fill(table); StringBuilder builder = new StringBuilder(); foreach (DataRow row in table.Rows) { string content = string.Format("['{0}',{1}]&",row["Name"].ToString(),Convert.ToInt32(row["Sales"])); builder.Append(content); } Response.Write(builder.ToString().Substring(0,builder.Length-1)); Response.End(); } } }
这里只是获取数据库中的数据，然后封装成字符串返回，html页面再分割然后将数据添加到图形报表中。
效果：
