# Chart Demo

- order: 0


all demo

---

````js
/** @jsx createElement */

'use strict';

import { createElement, Component, PropTypes,render } from 'rax';
import { View, Text, Env ,ScrollView,Dimensions} from 'weex-nuke';
import Chart, { Bar, Axis, Line, Point, Pie, Coord } from 'nuke-biz-custom-chart';

const { height: screenHeight } = Dimensions.get('window');
const screenWidth = 750;

const lineData = [
  { time: '2016-08-08 00:00:00', tem: 10 },
  { time: '2016-08-08 00:10:00', tem: 22 },
  { time: '2016-08-08 00:30:00', tem: 20 },
  { time: '2016-08-09 00:35:00', tem: 26 },
  { time: '2016-08-09 01:00:00', tem: 20 },
  { time: '2016-08-09 01:20:00', tem: 26 },
  { time: '2016-08-10 01:40:00', tem: 28 },
  { time: '2016-08-10 02:00:00', tem: 20 },
  { time: '2016-08-10 02:20:00', tem: 28 },
];

const lineConfig = {
  time: {
    type: 'timeCat',
    mask: 'mm／dd',
    tickCount: 3,
    range: [0, 1],
  },
  tem: {
    tickCount: 5,
    min: 0,
  },
};
class Mod extends Component {
  state = {
    isChange: false,
  };
  renderPie() {
    const pieData = [{ a: '1', b: 0.3, c: '1' }, { a: '1', b: 0.3, c: '2' }, { a: '1', b: 0.4, c: '3' }];

    return (
      <Chart
        style={{
          width: 750,
          height: 350,
        }}
        data={pieData}
      >
        <Coord type="polar" inner={0.6} transposed />
        <Pie position="a*b" color={'c'} inner={0.3} />
      </Chart>
    );
  }
  renderCharts() {
    const { isChange } = this.state;
    let data;
    if (isChange) {
      data = [
        { time: '周一', tem: 16.9, rain: 12 },
        { time: '周二', tem: 19.5, rain: 16 },
        { time: '周三', tem: 24.5, rain: 19 },
        { time: '周四', tem: 28.2, rain: 14 },
        { time: '周五', tem: 31.5, rain: 15 },
        { time: '周六', tem: 45.2, rain: 18 },
        { time: '周日', tem: 56.5, rain: 14 },
      ];
    } else {
      data = [
        { time: '周一', tem: 6.9, rain: 10 },
        { time: '周二', tem: 9.5, rain: 13 },
        { time: '周三', tem: 14.5, rain: 14 },
        { time: '周四', tem: 18.2, rain: 10 },
        { time: '周五', tem: 21.5, rain: 12 },
        { time: '周六', tem: 25.2, rain: 16 },
        { time: '周日', tem: 26.5, rain: 13 },
      ];
    }
    return (
      <View>
        <Chart
          style={{
            width: 750,
            height: 350,
          }}
          data={lineData}
          config={lineConfig}
        >
          <Axis
            name="time"
            label={{
              fontSize: 28,
            }}
          />
          <Axis
            name="tem"
            label={{
              fontSize: 28,
            }}
          />
          <Line position="time*tem" inner={0.3} shape="smooth" />
        </Chart>

        <Chart
          style={{
            width: 750,
            height: 350,
          }}
          data={lineData}
          config={lineConfig}
        >
          <Axis name="time" />
          <Axis
            name="tem"
            label={{
              fontSize: 28,
            }}
          />
          <Line position="time*tem" inner={0.3} shape="smooth" />
        </Chart>
        {this.renderPie()}
        <Chart
          ref="line"
          style={{
            width: 750,
            height: 350,
          }}
          data={data}
          config={{
            tem: {
              tickCount: 5,
              min: 0,
            },
            rain: {
              tickCount: 5,
              min: 0,
            },
          }}
        >
          <Axis name="time" label={{ fontSize: 24 }} />
          <Axis name="tem" label={{ fontSize: 18 }} />
          <Line position="time*tem" color="#c22bc6" size={1} shape="smooth" />
          <Point position="time*tem" color="#c22bc6" size={2} shape="smooth" />
          <Bar position="time*tem" color="#c22bc6" shape="smooth" />
        </Chart>
        <Chart
          style={{
            width: 750,
            height: 500,
          }}
          data={[{ tem: 10, city: 'tokyo' }, { tem: 4, city: 'newYork' }, { tem: 3, city: 'berlin' }]}
          config={{
            tem: {
              tickCount: 5,
            },
            city: {
              tickCount: 5,
            },
          }}
        >
          <Axis name="city" label={{ fontSize: 28 }} />
          <Axis name="tem" label={{ fontSize: 28 }} />
          <Bar position="city*tem" color="#c22bc6" shape="smooth" />
        </Chart>
      </View>
    );
  }

  componentDidMount() {
    // this.doDraw();
  }

  render() {
    return <ScrollView style={{ ...styles.container, ...styles.containerBG }}>{this.renderCharts()}</ScrollView>;
  }
}

const styles = {
  container: {
    width: 750,
    height: 1200,
  },
  containerBG: {
    backgroundColor: '#ffffff',
  },
  center: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  verticalCenter: {
    justifyContent: 'center',
  },
  horizontalCenter: {
    alignItems: 'center',
  },
  title: {
    fontSize: 32,
    textOverflow: 'ellipsis',
    lineHeight: 36,
  },
  cellWrap: {
    margin: 16,
    marginBottom: 0,
    backgroundColor: '#fff',
    borderRadius: 4,
    overflow: 'hidden',
  },
  cellWrapPadding: {
    paddingTop: 24,
    paddingBottom: 24,
    paddingLeft: 32,
    paddingRight: 32,
  },
  text: {
    fontSize: 24,
    color: '#999',
  },
  loading: {
    justifyContent: 'center',
    alignItems: 'center',
    width: screenWidth,
    padding: 16,
  },
  loadingText: {
    fontSize: 28,
    color: '#333',
    height: 48,
  },
  menu: {
    position: 'absolute',
    width: 750,
    height: screenHeight,
    top: -screenHeight * 2,
    left: 0,
    opacity: 0,
    backgroundColor: '#fff',
    zIndex: 1,
  },
};

render(<Mod />);


````