nuke-biz-custom-chart/demo/pie2.md

custom-chart

# Chart Demo

* order: 0

pie demo

---

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

const CHART_WIDTH = 304;
const CHART_HEIGHT = 304;

class Demo extends Component {
  constructor() {
    super();
    this.changeData = this.changeData.bind(this);
    this.state = {
      pieData1: [
        { circle: 'wallet', val: 0.7, part: 'deposited' },
        { circle: 'wallet', val: 0.08, part: 'refunds' },
        { circle: 'wallet', val: 0.22, part: 'rebates' }
      ],
      pieData2: [
        { circle: 'wallet', val: 10.51, part: 'deposited' },
        { circle: 'wallet', val: 1.23, part: 'rebates' }
      ],
      pieData3: [{ circle: 'wallet', val: 1, part: 'deposited' }]
    };
  }
  calPieData(deposit, rebate, refund) {
    const pieData = [
      { circle: 'wallet', val: 0, part: 'deposited' },
      { circle: 'wallet', val: 0, part: 'refunds' },
      { circle: 'wallet', val: 0, part: 'rebates' },
      { circle: 'wallet', val: 1, part: 'default' }
    ];
    // Calculate the percentage
    if (deposit || rebate || refund) {
      const all = deposit + rebate + refund;
      pieData[0].val = deposit / all;
      pieData[1].val = refund / all;
      pieData[2].val = rebate / all;
      pieData[3].val = 0;
    }
    return pieData;
  }
  changeData() {
    const pieData = this.calPieData(0 * 1, 1.23 * 1, 10.51 * 1);
    this.setState({
      pieData3: [
        { circle: 'wallet', val: 0.08, part: 'deposited' },
        { circle: 'wallet', val: 0.33, part: 'refunds' },
        { circle: 'wallet', val: 0.59, part: 'rebates' }
      ]
    });
  }
  render() {
    return (
      <Page title="Pie">
        <View
          style={{
            width: CHART_WIDTH,
            height: CHART_HEIGHT,
            backgroundColor: '#f0d4d9'
          }}
        >
          <Chart
            id="c1"
            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>

        <View
          style={{
            width: CHART_WIDTH,
            height: CHART_HEIGHT,
            backgroundColor: '#f0d4d9'
          }}
        >
          <Chart
            id="c2"
            style={{ width: CHART_WIDTH, height: CHART_HEIGHT }}
            data={this.state.pieData2}
            margin={12}
          >
            <Coord type="polar" inner={0.62} transposed />
            <Pie
              position="circle*val"
              color={'part'}
              inner={0.3}
              theme={['#1A9CB7', '#FECC05']}
            />
          </Chart>
        </View>
        <View
          style={{
            width: CHART_WIDTH,
            height: CHART_HEIGHT,
            backgroundColor: '#f0d4d9'
          }}
        >
          <Chart
            id="c3"
            style={{ width: CHART_WIDTH, height: CHART_HEIGHT }}
            data={this.state.pieData3}
            margin={12}
          >
            <Coord type="polar" inner={0.62} transposed />
            <Pie
              position="circle*val"
              color={'part'}
              inner={0.3}
              theme={['#1A9CB7', '#1A9CB7', '#FECC05']}
            />
          </Chart>
        </View>
      </Page>
    );
  }
}

render(<Demo />);
```