# 线图 demo

- order: 1

线图常见 demo

---

````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 data = [
    {"time": '12/1',"tem": 0.1},
    {"time": '12/2',"tem": 0.2},
    {"time": '12/3',"tem": 1},
    {"time": '12/4',"tem": 1.2},
    {"time": '12/5',"tem": 1.8},
    {"time": '12/6',"tem": 1.7},
    {"time": '12/7',"tem": 1.1},
    {"time": '12/8',"tem": 0.8},
    {"time": '12/9',"tem": 1.1},
    {"time": '12/10',"tem": 1.9},
    {"time": '12/11',"tem": 2.2},
    {"time": '12/12',"tem": 1.4},
    {"time": '12/13',"tem": 0.8},
    {"time": '12/14',"tem": 1.1},
    {"time": '12/15',"tem": 1.5},
    {"time": '12/16',"tem": 0.8},
    {"time": '12/17',"tem": 1.1},
    {"time": '12/18',"tem": 1.9},
    {"time": '12/19',"tem": 1.4},
    {"time": '12/20',"tem": 1}

];
const data2 = [
    {"time": '周一',"tem": 12.5,"city": "北京"},
    {"time": '周二',"tem": 22.9,"city": "北京"},
    {"time": '周三',"tem": 20,"city": "北京"},
    {"time": '周四',"tem": 26,"city": "北京"},
    {"time": '周五',"tem": 20,"city": "北京"},
    {"time": '周六',"tem": 26,"city": "北京"},
    {"time": '周日',"tem": 28,"city": "北京"},
    {"time": '周一',"tem": 5,"city": "纽约"},
    {"time": '周二',"tem": 12,"city": "纽约"},
    {"time": '周三',"tem": 26,"city": "纽约"},
    {"time": '周四',"tem": 20,"city": "纽约"},
    {"time": '周五',"tem": 28,"city": "纽约"},
    {"time": '周六',"tem": 26,"city": "纽约"},
    {"time": '周日',"tem": 20,"city": "纽约"},
    {"time": '周一',"tem": 22,"city": "上海"},
    {"time": '周二',"tem": 23,"city": "上海"},
    {"time": '周三',"tem": 29,"city": "上海"},
    {"time": '周四',"tem": 24,"city": "上海"},
    {"time": '周五',"tem": 22,"city": "上海"},
    {"time": '周六',"tem": 25,"city": "上海"},
    {"time": '周日',"tem": 22,"city": "上海"}
];


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": '8月',"tem": 26,"city": "beijing"},
    {"time": '9月',"tem": 12,"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"},
    {"time": '8月',"tem": 16,"city": "newYork"},
    {"time": '9月',"tem": 22,"city": "newYork"},

    
];
const cols = {
    time: { alias: '时间' },
    tem: { alias: '温度' }
};

let App = class NukeDemoIndex extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tempData : data3
        }
    }
    xformat(x){
        let d = new Date(x);
        return (d.getMonth()+1) +'/'+ d.getDate();
    }
    changeData=()=>{
        var newData =[...data3];
        newData[0]['tem'] = 6;
        newData[9]['tem'] = 15;
        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"},{"time": '8月',"tem": 26,"city": "sydney"},{"time": '9月',"tem": 12,"city": "sydney"}])
        this.setState({
            tempData:newData
        })
    }
    render() {

        return (
            <Page title="LineChart">
                <Page.Intro main="基本"></Page.Intro>
                <LineChart style={{backgroundColor:'#f8f8f8'}} dragEnabled={false} scaleEnabled={false} smooth={false} id="line-chart-1" xAxis={{name:"time",show:true}} yAxis={{name:"tem",show:false}} grids={{show:true}} data={data} cols={cols} width={750} height={350} ref="chart1" showYAxis={true} labelCount={8} showLegend={false} drawValues={true}>
                </LineChart>
                
                <Page.Intro main="绘制下方区域"></Page.Intro>
                <View style={{width:750,height:300}}>
                    <LineChart style={{flex:1}} width={750} height={350} dragEnabled={false} scaleEnabled={false} smooth={false} id="line-chart-44" xAxis={{name:"time",show:true}} yAxis={{name:"tem",show:false}} grids={{show:true}} data={data} cols={cols} ref="chart44" showYAxis={false} labelCount={8} showLegend={false} fill={{drawFilled:true,fillAlpha:0.5}}>
                    </LineChart>
                </View>
                <Page.Intro main="自定义颜色"></Page.Intro>
                <LineChart dragEnabled={true} scaleEnabled={true} smooth={false} id="line-chart-2" xAxis={{name:"time"}} yAxis={{name:"tem"}} data={data} cols={cols} width={750} height={350} ref="chart2" showLegend={false} points={{drawPoints: true,radius:5,filled:false,holeRadius:3}} grids={{show:true,lineWidth:10,color:'#eeeeee'}} lineWidth={2} colors={['#F1A342']} drawMarkers={true}>
                </LineChart>
                <Page.Intro main="2 组数据的例子"></Page.Intro>
                <LineChart dragEnabled={true} scaleEnabled={true} smooth={true} id="line-chart-3" xAxis={{name:"time"}} yAxis={{name:"tem"}} lineSeperator="city" data={this.state.tempData} cols={cols} width={750} height={350} ref="chart3"  fill={{drawFilled:true,fillAlpha:0.5}}>
                </LineChart>
               
            </Page>
        );
    }
}

const styles = {

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



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