Highcharts实现走势图

Posted 2020-10-03 于继海

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