Highcharts是一个纯JavaScript框架，与MSChart完全不一样，
可以在网页中使用，所以php、asp.net、jsp等等页面中都可以使用。
Highcharts官网：http://www.highcharts.com/
Highcharts中文网：http://www.hcharts.cn/
可以在官网下载对应的版本：
下载后文件夹里面的内容如图(我这里下载的是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页面再分割然后将数据添加到图形报表中。
效果：
浙公网安备 33010602011771号