<!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/420306080ec.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 }, xTickCounts : [1,8],//设置x轴tick最小数目和最大数目 legend: null, yAxis : { animate : false }, seriesOptions : { //设置多个序列共同的属性 lineCfg : { //如果数据序列未指定类型,则默认为指定了xxCfg的类型,否则都默认是line markers : { single: true }, animate : false, line : { 'stroke-width' : 1 }, lineActived : { 'stroke-width' : 1 } } }, tooltip : { valueSuffix : '¥' }, zoom: [Date.UTC(2007,0,01),Date.UTC(2008,0,01)], series : [{ name: 'test to EUR', pointInterval: 24 * 3600 * 1000, pointStart: Date.UTC(2006, 0, 01), data: data, id: 'series1' },{ type: 'flag', name: 'flag', animate: false,//去掉动画 onSeries:'series1', data:[ { x: Date.UTC(2007, 0, 01) }, { x: Date.UTC(2007, 5, 01) }, { x: Date.UTC(2008, 0, 01) } ] }] }); stock.render(); }); </script> </body> </html>