Package Exports

@clunch/candlestick

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@clunch/candlestick) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

candlestick

K线图组件，包括缩放，移动等K线图。

如何使用？

首先，需要安装npm包（目前我们仅支持npm方式管理）：

npm install --save clunch @clunch/candlestick

然后注册组件：

import Clunch from 'clunch';
import candlestick from '@clunch/candlestick';

Clunch.series('ui-candlestick',candlestick);

然后，你就可以使用这个组件了：

<ui-candlestick data='Array'/>

data:数据，应该是一个数组（比如：[["2013/1/24",2320.26,2320.26,2287.3,2362.94],...]）

除了上面的必输项外，还有下列可选项：

属性	类型	描述	默认值
x	number	图形左上角位置横坐标	0
y	number	图形左上角位置纵坐标	0
width	number	图形宽	画布的宽
height	number	图形高	画布的高

由于此组件是基于Clunch开发的，我们默认你已经掌握了相关知识。

<< 你可以点击此处学习Clunch.js如何使用

交互事件

图形绘制完成以后，我们可能还需要图形是可交互的，比如鼠标点击某个条目，可以提示对应的信息。

那么，我们可以对.clunch改造一下：

<ui-candlestick c-on:click='doit'/>

然后，在new Clunch的时候添加doit方法：

new Clunch({
    ......
    methods:{
        doit(target){
            console.log(target);
        }
    }
});

打印的结果如下：

target = {
    attr:当前组件的属性值
    data:你点击区域的信息
    left:点击位置的横坐标
    top:点击位置的纵坐标
    region:点击区域名称
    subRegion:点击子区域名称
    ......
}

其中，target.subRegion的格式举例子：1点击第二个条目。

这样子，你就可以添加弹框或者悬浮提示来实现和绘制图形的交互了！

开源协议

MIT