nuke-biz-qn-chart/docs/line-complex.md

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

# 线图 demo

- order: 1

state 控制数据修改

---

````js
'use strict';

/** @jsx createElement */
import {createElement, Component,render} from 'rax';
import { View,Page ,Button} from 'nuke';
import { LineChart } from 'nuke-biz-qn-chart';

const data3 = [
    {"time": '1月',"tem": 10,"city": "beijing"},
    {"time": '2月',"tem": 22,"city": "beijing"},
    {"time": '3月',"tem": 16,"city": "beijing"},
    {"time": '4月',"tem": 26,"city": "beijing"},
    {"time": '5月',"tem": 12,"city": "beijing"},
    {"time": '6月',"tem": 26,"city": "beijing"},
    {"time": '7月',"tem": 18,"city": "beijing"},

    {"time": '1月',"tem": 28,"city": "newYork"},
    {"time": '2月',"tem": 16,"city": "newYork"},
    {"time": '3月',"tem": 26,"city": "newYork"},
    {"time": '4月',"tem": 12,"city": "newYork"},
    {"time": '5月',"tem": 26,"city": "newYork"},
    {"time": '6月',"tem": 20,"city": "newYork"},
    {"time": '7月',"tem": 22,"city": "newYork"},
];
const cols = {
    time: { alias: '时间' },
    tem: { alias: '温度' }
};

let App = class NukeDemoIndex extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tempData : data3
        }
    }
    changeData=()=>{
        var newData =[...data3];
        newData = newData.concat([{"time": '1月',"tem": 8,"city": "sydney"},{"time": '2月',"tem": 6,"city": "sydney"},{"time": '3月',"tem": 19,"city": "sydney"},{"time": '4月',"tem": 12,"city": "sydney"},{"time": '5月',"tem": 25,"city": "sydney"},{"time": '6月',"tem": 25,"city": "sydney"},{"time": '7月',"tem": 17,"city": "sydney"}])
        this.setState({
            tempData:newData
        })
    }
    render() {
        return (
            <Page title="LineChart">

                <Page.Intro main="数据可修改的例子"></Page.Intro>
                <LineChart dragEnabled={true} scaleEnabled={true} smooth={true} id="line-chart-3" xAxis={{name:"time",color:'red',fontSize:12}} yAxis={{name:"tem",color:'blue',fontSize:16}} lineSeperator="city" data={this.state.tempData} cols={cols} width={750} height={350} ref="chart3"  fill={{drawFilled:true,fillAlpha:0.5}} drawMarkers={true}>
                </LineChart>
                <Button type="primary" onPress={this.changeData} >修改数据</Button>
            </Page>
        );
    }
}
const styles = {
    chart: {
        width:'700rem',
        marginLeft:'25rem',
        height:'700rem'
    },
    button: {
        margin: 10
    }
};



render(<App/>);
````