nuke-biz-custom-chart/demo/canvas.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 { Canvas } from 'nuke-biz-custom-chart';

const CHART_WIDTH = 304;
const CHART_HEIGHT = 304;
class Demo extends Component {
  constructor() {
    super();
  }
  componentDidMount() {
    const contextPromise = this.refs.raxCanvasDemo.getContext();
    contextPromise.then(ctx => {
      var center = { x: 152, y: 152 };
      var radius = 127.99997568;
      var innerRadius = 79.36002432;
      ctx.fillStyle = 'red';
      ctx.moveTo(center.x + radius, center.y);
      ctx.arc(center.x, center.y, radius, 0, Math.PI);
      ctx.arc(center.x, center.y, radius, Math.PI, Math.PI * 2);
      // ctx.moveTo(center.x + innerRadius, center.y);
      ctx.arc(center.x, center.y, innerRadius, Math.PI * 2, Math.PI, true);
      ctx.arc(center.x, center.y, innerRadius, Math.PI, 0, true);
      ctx.closePath();
      ctx.fill();
    });
  }

  render() {
    return (
      <Canvas
        style={{
          width: 750,
          height: 750
        }}
        ref="raxCanvasDemo"
      />
    );
  }
}

render(<Demo />);
```