gallery/kcharts/1.0/doc/barchart.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
   <title>KCharts doc 1.0</title>
  <link rel="stylesheet" href="./custom/index.css" type="text/css" media="screen" />
</head>
<body>
  <xmp theme="spacelab" style="display:none;">
# BarChart
---
代码示例
---
```
//配置kissy包路径
KISSY.config({
  packages:[
      {
        name:"gallery",
        path:"http://a.tbcdn.cn/s/kissy/"
      }
    ]
});
//载入barchart
KISSY.use('gallery/kcharts/1.0/barchart/index',function(S,BarChart){

  var barChart = new BarChart({
        renderTo:"#demo1",
         xAxis: {
            text:['星期一','星期二','星期三','星期四','星期五','星期六','星期日'],
                      css:{

                      }
                },
                yAxis:{
                    css:{
                      },
                      num:10,
                      min:0,  
                      max:4200
                 },
        series:[
          {
            data:[
                    {y:100,week:'星期一'},
                    {y:4000,week:'星期二'},
                    {y:120,week:'星期三'},
                    {y:234,week:'星期四'},
                    {y:234,week:'星期五'},
                    {y:234,week:'星期六'},
                    {y:234,week:'星期日'}
            ]
          }
        ],
        defineKey:{
          x:"week",
          y:"y"
        },
        tip:{
          template:"总支出：<span>{{y}}</span> 元<br/>"
        }
      });
  
});
```

---
Config（详细配置）
---
### renderTo 

{ id|HTMLElement } 容器 <span style='color:#f60'>注:容器必须要有width和height的绝对值</span>

### autoRender

{ boolean } 是否自动渲染 如果为手动 则需要调用 render()方法

### canvasAttr

{ object } 设置图形区域位于容器的位置以及尺寸

  - `x` { number } 水平距离
  - `y` { number } 垂直距离
  - `width` { number } 宽度
  - `height` { number } 高度 

### themeCls 

{ string } 主题className 默认："ks-chart-default"

### colors 

{ array } 手动配置线的颜色 （可选） 如 [{"DEFAULT":"#fff","HOVER":"#ccc"},{"DEFAULT":"#fff","HOVER":"#ccc"}]
    - `DEFAULT` { string } 默认颜色
    - `HOVER` { string } hover颜色

### title

{object} 主标题


   - `isShow` { boolean } 是否渲染显示
   - `css` { object } css样式
   - `content` { string } 内容 可以是html或者text文本

### subTitle

{object} 副标题 同 title

### xAxis 

{object} x 轴配置
   - `isShow` { boolean } 是否渲染显示
   - `css` { object } css样式

### yAxis

{object} y 轴配置 同 xAxis

   - `min` { number } 纵坐标最小值
   - `max` { number } 纵坐标最大值
   - `num` { number } 纵轴刻度的份数

### xGrids

{object} 横向网格配置 同 xAxis

### yGrids

 {object} 纵向网格配置 同 xAxis

### bars
  
柱形属性配置 同 xAxis

### series
   
   {array} 数据

### defineKey

   {object} 针对数据 data 对应的key定义

### tip  

  {object} 数据提示层配置

   - `template` { string } 文本或者是模板 详见KISSY.Template
   - `css` { object } css样式  注:"{COLOR}" 默认选择柱体的颜色，如{"border-color":"{COLOR}"}
   - `anim` { object } 动画配置 "easing" 和 "duration" 如 {easing:"easeOut",duration:0.3} 
   - `offset` { object } tip的偏移量 "x" 和 "y" 如 {x:100,y:40}
   - `boundryDetect` { boolean } 是否进行边缘检测
   - `alignX` { string } 水平对齐方式 有"left" "center" "right"三种 默认 "left"
   - `alignY` { string } 水平对齐方式 有"top" "middle" "bottom"三种 默认 "top"

### anim
  
  {object} 渲染动画配置 配置该项则具有动画效果
  
   - `duration` { number } 动画周期


---
Method（方法）
---

### render()

渲染图表

### getPaper()

获取html画布

### data2GrapicData

根据实际数据 获取相应轴上的偏移像素

### clear()

清除画布上的所有内容


---
Event（事件）
---

### afterRender

渲染完毕后

### paperLeave

离开画布 (可以用来触发隐藏tip等动作)

### barChange

柱之间的切换 (可以用来触发tip的移动和数据渲染)

----
demo
----
  [bar-chart.html](../demo/barchart/bar-chart.html) 柱形图<br/>
  [bar-chart-multi.html](../demo/barchart/bar-chart-multi.html) 多柱形图<br/>
  </xmp>

<script src="./strapdown.js"></script>
</body>
</html>