cr-xian

react component based on antV, for table data visualization

表格数据可视化为弦图

✨ Example View

📦 Installation

cnpm install --save cr-xian
or 
npm install --save cr-xian

🔨 Usage

import React, { PureComponent } from 'react';
import Xian from 'cr-xian';
 
const HHeader = ['张三', '李四', '小明']
const VHeader = ['华北', '华南']
const TData = [[20, 18, 42], [63, 51, 130]]
 
export default class App extends PureComponent {
 
  render () {
    return (
      <div>
        <Xian HHeader={HHeader} VHeader={VHeader} TData={TData}  />
      </div>
    )
  }
}

💡 Api

name	type	description
HHeader	array	表头数组
VHeader	array	列表头数组
TData	array	表格主数据
width	number	弦图宽度
height	number	弦图高度
padding	array （例: [70, 50, 70, 50]）	弦图内边距
outTitle	string	弦外环 Tooltip 标题
innerTitle	string	弦带 Tooltip 标题

Development

git clone https://github.com/Fea-Sin/cr-xian.git

cnpm install

npm start

Example

http://localhost:8018/examples/testOne.html

Test

npm test
 
npm run coverage

License

MIT