Highcharts实现走势图

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="width:95%;height:80%;" showModal="true" allowResize="true" >

 2      <div id="chartContainer" style="width: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                     width: 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.点击右侧“汇率”，则可以以藏该走势线条，如下图