[运行一下](http://www.shouce.ren/study/api/s/7099)
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图形展示</title>
</head>
<body>
<div class="detail-section">
<div id="canvas">
</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 type="text/javascript">
var chart = new AChart({
theme : AChart.Theme.SmoothBase,
id : 'canvas',
width : 950,
height : 500,
plotCfg : {
margin : [50,50,80] //画板的边距
},
xAxis : {
type : 'time',
formatter : function (value) {
return AChart.Date.format(new Date(value),'yyyy-mm-dd');
},
autoAppend : 20 //自动附加的offset
},
yAxis : {
min : 0
},
seriesOptions : { //设置多个序列共同的属性
/*columnCfg : { //公共的样式在此配置
}*/
},
tooltip : {
valueSuffix : '￥'
},
series : [ {
name: 'Africa',
type : 'column',
pointStart : new Date(2010,01,01).getTime(),
pointInterval : 24 * 3600 * 1000,
data: [34.4, 21.8, {y : 20.1,attrs : {fill : '#ff0000'}}, 20, 19.6, 19.5, 19.1, 18.4, 18,
17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8,
11.7, 11.2],
labels : { //显示的文本信息
label : {
rotate : -90,
y : 10,
'fill' : '#fff',
'text-anchor' : 'end',
textShadow: '0 0 3px black',
'font-size' : '14px'
}
}
}]
});
chart.render();
</script>
</body>
</html>
~~~
