nuke-biz-custom-chart

custom-chart

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

---

API

[to be finished]

Demos

Pie demo

/** @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 />);