Highcharts实现走势图

      Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

    HighCharts 中文api很少,并且零散不全,一般通过http://api.highcharts.com/highcharts也都可以看懂。

    先看效果吧

  Highcharts实现走势图_第1张图片

这个是近期(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.点击右侧“汇率”,则可以以藏该走势线条,如下图

 

你可能感兴趣的:(Highcharts)