gallery/kcharts/1.1/doc/linechart.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
 <title>KCharts doc 1.1</title>
  <link rel="stylesheet" href="./custom/index.css" type="text/css" media="screen" />
</head>
<body>
  <xmp theme="spacelab" style="display:none;">
# LineChart
---
代码示例
---
```
//配置kissy包路径
KISSY.config({
  packages:[
      {
        name:"gallery",
        path:"http://a.tbcdn.cn/s/kissy/"
      }
    ]
});
//载入linechart
KISSY.use('gallery/kcharts/1.1/linechart/index',function(S,LineChart){

  var lineChart = new LineChart({
        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 } 高度 

### lineType 

{ string } 线图类型 默认 "straight"  如：弧线 "arc"

### 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

### points

{object} 点的配置

   - `attr` { object } 默认样式
      >- `stroke` { string } 笔触颜色  如:"#ccc"
      >- `r` { number } 圆点半径
      >- `fill` { string } 填充色
      >- `stroke-width` { number } 笔触宽度
   - `hoverAttr` { object } hover样式 同attr

### xAxis 

{object} x 轴配置

   - `isShow` { boolean } 是否渲染显示
   - `css` { object } css样式

### yAxis

{object} y 轴配置 同 xAxis

   - `min` { number } 纵坐标最小值
   - `max` { number } 纵坐标最大值
   - `num` { number } 纵轴刻度的份数


### xGrids

{object} 横向网格配置 同 xAxis

### yGrids

 {object} 纵向网格配置 同 xAxis

###  xLabels

 {object} x轴刻度文本 同 xAxis

###  yLabels

 {object} y轴刻度文本 同 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"

### comparable

  {boolean} 是否为多线比较，公用tip数据 默认false

### anim
  
  {object} 渲染动画配置 配置该项则具有动画效果
  
   - `duration` { number } 动画周期
   - `easing` { object } 动画效果 默认"easeIn"
   
---
Method（方法）
---

### render()

渲染图表

### getPaper()

获取html画布

### data2GrapicData

根据实际数据 获取相应轴上的偏移像素

### showLine(lineIndex)

展示直线

### hideLine(lineIndex)

隐藏直线

### clear()

清除画布上的所有内容

---
Event（事件）
---

### afterRender

渲染完毕后

### paperLeave

离开画布 (可以用来触发隐藏tip等动作)

### stockChange

点之间的切换 (可以用来触发tip的移动和数据渲染)
  </xmp>

<script src="./strapdown.js"></script>
</body>
</html>