nuke-biz-qn-chart/docs/test.md

weex 版本千牛业务图表库，基于weex + rax,包含线图、柱状图、饼图、雷达图等，其他类型的图表正在按业务需求陆续接入。其中 native 端由客户端插件实现，h5 端使用 g2-mobile

# 柱状图 demo

- order: 0

柱状图常见 demo

---

````js

'use strict';

/** @jsx createElement */
import {createElement, Component,render} from 'rax';

import {Page} from 'nuke';
import {LineChart} from 'nuke-biz-qn-chart';

const data = [
      {
        "weekNum": "第1周",
        "awardMoney": 1,
        "rankNum": 2
      },{
        "weekNum": "第2周",
        "awardMoney": 2,
        "rankNum": 4
      },{
        "weekNum": "第3周",
        "awardMoney": 1,
        "rankNum": 2
      },{
        "weekNum": "第4周",
        "awardMoney": 1,
        "rankNum": 2
      },{
        "weekNum": "第5周",
        "awardMoney": 2,
        "rankNum": 4
      },{
        "weekNum": "第6周",
        "awardMoney": 1,
        "rankNum": 2
      },{
        "weekNum": "第7周",
        "awardMoney": 1,
        "rankNum": 2
      }
    ];

    const cols = {
      weekNum: {alias: '时间'},
      rankNum: {alias: '名次'}
    };

let App = class NukeDemoIndex extends Component {
    constructor(props) {
        super(props);
    }

    xformat(x){
        let d = new Date(x);
        return (d.getMonth()+1) +'/' + d.getDate();
    }
    render() {

        return (
            <Page title="LineChart tst">
                <LineChart style={{backgroundColor: '#f8f8f8'}}
                   dragEnabled={true}
                   scaleEnabled={false}
                   smooth={false}
                   id="line-chart-1"
                   xAxis={{name: "weekNum", show: true}}
                   yAxis={{name: "rankNum", show: false}}
                   grids={{show: true}}
                   data={data}
                   cols={cols}
                   width={750}
                   height={350}
                   ref="chart1"
                   labelCount={data.lenth}
                   showLegend={false}>
        </LineChart>

                

               
            </Page>
        );
    }
}

const styles = {

    chart: {
        width:'700rem',
        marginLeft:'25rem',
        height:'700rem'
    },
    button: {
        margin: 10
    }
};



render(<App/>);

````