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.点击右侧“汇率”，则可以以藏该走势线条，如下图