nuke-biz-custom-chart/README.md

custom-chart

# custom-chart

- category: UI
- chinese: 图表
- type: UI组件

---

## API

[to be finished]


## Demos

### Pie demo
<img src="https://img.alicdn.com/tfs/TB1AhxqciqAXuNjy1XdXXaYcVXa-1242-2208.png" width="200" />

````js
/** @jsx createElement */
'use strict';
import { createElement, Component, PropTypes,render } from 'rax';
import { View, Text, Env ,Dimensions,Page} from 'weex-nuke';
import Chart, { Pie, Coord } from 'nuke-biz-custom-chart';

const CHART_WIDTH = 300;
const CHART_HEIGHT = 300;

class Demo extends Component {
  constructor(){
    super();
    this.state = {
      pieData1 : [
        { circle: 'wallet', val: 0.7,   part: 'deposited'}, 
        { circle: 'wallet', val: 0.08,  part: 'refunds'},
        { circle: 'wallet', val: 0.22,  part: 'rebates'}
      ]
    }
  }
  render() {
    return (
      <View style={{width:CHART_WIDTH,height:CHART_HEIGHT,backgroundColor:'#f0d4d9'}}>
        <Chart style={{width: CHART_WIDTH,height: CHART_HEIGHT}} data={this.state.pieData1} margin={12}>
          <Coord type="polar" inner={0.62} transposed />
          <Pie position="circle*val" color={'part'} inner={0.3} theme={['#1A9CB7','#F44336','#FECC05']} />
        </Chart>
      </View>
    );
  }
}

render(<Demo />);

````