Highcharts
API:http://api.highcharts.com/highstock
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 4 <title>title</title> 5 6 </head> 7 <body> 8 <div id="container" style="height: 400px; min-width: 600px"></div> 9 </body> 10 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 11 <script src="http://code.highcharts.com/stock/highstock.js"></script> 12 <script src="http://code.highcharts.com/stock/modules/exporting.js"></script> 13 14 <script type="text/javascript"> 15 function requestData() { 16 alert(0); 17 } 18 var data1=[[1230771600000, -5.8, 0.1], 19 [1230858000000, -4.1, 1.4], 20 [1230944400000, -0.5, 4.1], 21 [1231030800000, -8.9, -0.7], 22 [1231117200000, -9.7, -3.7], 23 [1231203600000, -3.4, 3.2], 24 [1231290000000, -3.9, -0.2], 25 [1231376400000, -2.4, 6.7], 26 [1231462800000, 3.8, 6.9], 27 [1231549200000, 3.1, 6.8], 28 [1231635600000, 0.0, 7.6], 29 [1231722000000, 5.6, 9.4], 30 [1231808400000, 3.6, 6.5], 31 [1231894800000, -3.6, 3.8], 32 [1231981200000, -6.0, -1.5], 33 [1232067600000, -3.8, 2.4]]; 34 $(function () { 35 $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) { 36 var chart = new Highcharts.StockChart({ 37 chart: { 38 renderTo: 'container',//指向的div的id属性 39 // events:{动态加载数据} 40 }, 41 exporting: { 42 enabled: false //是否能导出趋势图图片(打印和下载图片功能) 43 }, 44 title : { 45 text : '图表标题'//图表标题 46 }, 47 xAxis: { 48 categories: ['Apples', 'Bananas', 'Oranges'], 49 tickPixelInterval: 150,//x轴上的间隔 50 title :{ 51 text:"x轴上显示的名称" 52 }, 53 //type: 'datetime', 54 labels: {//定义x轴上日期的显示格式 55 formatter: function() { 56 var vDate=new Date(this.value); 57 //alert(this.value); 58 return vDate.getFullYear()+"-"+(vDate.getMonth()+1)+"-"+vDate.getDate(); 59 }, 60 align: 'center' 61 } 62 }, 63 yAxis : { 64 title: { 65 text: 'y轴上的标题' //y轴上的标题 66 } 67 }, 68 tooltip: { 69 xDateFormat: '%Y-%m-%d, %A'//鼠标移动到趋势线上时显示的日期格式 70 }, 71 rangeSelector: { 72 buttons: [{//定义一组buttons,下标从0开始 73 type: 'month', 74 count: 1, 75 text: '1m' 76 }, { 77 type: 'month', 78 count: 3, 79 text: '3m' 80 }, { 81 type: 'year', 82 count: 1, 83 text: '1y' 84 }, { 85 type: 'all', 86 text: 'All' 87 }], 88 selected: 0//表示以上定义button的index,从0开始 89 }, 90 credits:{//是否显示版权信息 91 enabled: false, 92 }, 93 series: [{ 94 name: '趋势线上时的显示',//鼠标移到趋势线上时显示的属性名 95 data: data1//属性值 96 }] 97 }); 98 }); 99 }); 100 101 </script> 102 </html>