Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
HighCharts 中文api很少，并且零散不全,一般通过http://api.highcharts.com/highcharts也都可以看懂。
先看效果吧
这个是近期（9月2日到11月27日的汇率走势图）数据，其实现非常简单，关键代码如下 1 <div id="win1" class="mini-window" title="近期汇率走势" style="95%;height:80%;" showModal="true" allowResize="true" >
2 <div id="chartContainer" style="100%;height:100%;"></div>
3 </div>
4
5 <script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
6 <script src="http://code.highcharts.com/highcharts.js"></script>
7 <script src="http://code.highcharts.com/modules/exporting.js"></script>
8
9 <script type="text/javascript">
10 var Xaxis; //X轴上面显示的数据
11 var AllData; //走势图中的数据
12
13 $.ajax({
14 url: '~~~~~',
15 type: 'GET',
16 success: function (e) {
Xaxis = mini.decode(e, true); //通过后来成功返回后，要对其进行编码，使其成为json对象
18 $.ajax({
19 url: '~~~~~~~',
20 type: 'GET',
21 success: function (e) {
22 debugger
23 AllData = mini.decode(e, true);
24 showChartWindow(); //构造 Highcharts 所需要的数据
25 grid.unmask();
26 },
27 error: function (jqXHR, textStatus, errorThrown) {
28 alert(jqXHR.responseText);
29 grid.unmask();
30 }
31 });
32 },
33 error: function (jqXHR, textStatus, errorThrown) {
34 alert(jqXHR.responseText);
35 grid.unmask();
36 }
37 });
38
39 function showChartWindow() {
40 var win = mini.get("win1");
41 win.show();
42 var chart = new Highcharts.Chart({
43 chart: {
44 renderTo: 'chartContainer',
45 type: 'line',
46 marginRight: 130,
47 marginBottom: 25
48 },
49 title: {
50 text: '汇率走势',
51 x: -20 //center
52 },
53 xAxis: {
54 categories: Xaxis
55 },
56 yAxis: {
57 title: {
58 text: '元'
59 },
60 plotLines: [{
61 value: 5.5,
62 2,
63 color: '#FF0000'
64 }]
65 },
66 tooltip: {
67 formatter: function () {
68 return '<b>' + this.series.name + '</b><br/>' +
69 this.x + ': ' + this.y + '元';
70 }
71 },
72 legend: {
73 layout: 'vertical',
74 align: 'right',
75 verticalAlign: 'top',
76 x: 10,
77 y: 100,
78 borderWidth: 0
79 },
80 series: AllData,
81 credits: { enabled: false }
82 }
83 );
84 }
其中，后台成功返回的Xaxis 数据为：
['09/02','09/03','09/04','09/05','09/06','09/09','09/10','09/11','09/12','09/13','09/16','09/17','09/22','09/23','09/24','09/25','09/26','09/27','09/29','10/08','10/09','10/10','10/11','10/14','10/15','10/16','10/17','10/18','10/21','10/22','10/23','10/24','10/25','10/28','10/30','10/31','11/01','11/04','11/05','11/07','11/11','11/12','11/13','11/14','11/15','11/18','11/19','11/20','11/21','11/22','11/25','11/26',]
返回的AllData数据为：
[{name:'汇率',data:[6.17,6.17,6.17,6.17,6.17,6.16,6.16,6.16,6.16,6.16,6.16,6.16,6.16,6.15,6.15,6.15,6.15,6.15,6.15,6.14,6.14,6.15,6.15,6.14,6.14,6.14,6.14,6.14,6.14,6.14,6.13,6.13,6.13,6.13,6.14,6.14,6.15,6.15,6.14,6.15,6.14,6.14,6.13,6.13,6.14,6.13,6.13,6.13,6.14,6.14,6.13,6.14,]}]，data中的数据必须为数字，否则无法显示
其他功能：
1.点击右上角的小方框，可以下载走势图的图片（多种格式）;
2.点击右侧“汇率”，则可以以藏该走势线条，如下图