<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图形展示</title> </head> <body> <div class="detail-section"> <div id="canvas" style="width : 950px;height : 400px;"> </div> </div> <script src="http://g.tbcdn.cn/bui/acharts/1.0.32/acharts-min.js"></script> <!-- https://g.alicdn.com/bui/acharts/1.0.29/acharts-min.js --> <script src="http://g.tbcdn.cn/bui/acharts/1.0.32/astock-min.js"></script> <!-- https://g.alicdn.com/bui/acharts/1.0.29/astock-min.js --> <script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script> <script type="text/javascript"> $.getJSON('/upload/files/201610/cc0329d44a5.json',function (data) { var stock = new AStock({ theme : AChart.Theme.SmoothBase, id : 'canvas', width : 950, height : 400, plotCfg : { margin : [60,50,60,50] //画板的边距 }, xAxis : {//格式化时间 type : 'time' , formatter : function(value) { return Chart.Date.format(new Date(value),'yyyy-mm-dd'); }, labels : { label : { 'font-size': '10' } }, animate : false }, yAxis : { animate : false }, xTickCounts : [1,8],//设置x轴tick最小数目和最大数目 seriesOptions : { //设置多个序列共同的属性 areaCfg : { //如果数据序列未指定类型,则默认为指定了xxCfg的类型,否则都默认是line markers : { single: true }, animate : false } }, legend: null, tooltip : { valueSuffix : '¥' }, zoom: [Date.UTC(2007,0,01),Date.UTC(2008,0,01)], series : [{ name: 'USD to EUR', type : 'area', line : { 'stroke-width' : 1, 'stroke' : 'rgb(47,126,216)' }, lineActived : { 'stroke-width' : 1 }, area : { fill : '90-#fff-rgb(47,126,216)', stroke : 'none' }, pointInterval: 24 * 3600 * 1000, pointStart: Date.UTC(2006, 0, 01), data: data }] }); stock.render(); }); </script> </body> </html>