时间柱状图

调试运行
<!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>