根据filter条件生成折线图(react-chartjs-2)

2 篇文章 0 订阅
2 篇文章 0 订阅
/** 
 * ComboBox change value to label ( ~ codeToDesc() )
 * @param {params} filter array
 * @param {chartinfo} list (list.dataName, list.xaxis,list.yaxis)
*/
setLineModuleData(params,chartinfo){
        var xData=[],datasets=[],lineModule,dateFrom,dateTo,everyDay,_state= this.state;
        dateFrom = formatDate(_state.DateFrom)
        dateTo = formatDate(moment(_state.Date).add(1,'day')._d)
        everyDay = this.getDiffDate(dateFrom,dateTo)
        if(params && params.length>0){
        for(let i=0;i<params.length;i++){
            var tempyData = [],filterName = params[i].label,color = this.setColor(),colorL = color.length,random = Math.floor(Math.random()*colorL)
            for(let j=0;j<everyDay.length;j++){
                let flag = true
                for(let a=0;a<chartinfo.length;a++){
                    if(chartinfo[a].dataName == filterName && chartinfo[a].xaxis == everyDay[j]){
                        tempyData.push(chartinfo[a].yaxis)
                        flag = false
                    }
                    continue
                }
                if(flag) tempyData.push(0)
            }
            xData = everyDay
            datasets[i]= 
            {
                'label': filterName,
                'fill': false,
                'lineTension': 0.1,
                'backgroundColor': i<colorL?color[i]:color[random],
                'borderColor':  i<colorL?color[i]:color[random],
                'borderCapStyle': 'butt',
                'borderDash': [],
                'borderDashOffset': 0.0,
                'borderJoinStyle': 'miter',
                'pointBorderColor':  i<colorL?color[i]:color[random],
                'pointBackgroundColor': '#fff',
                'pointBorderWidth': 1,
                'pointHoverRadius': 5,
                'pointHoverBackgroundColor': i<colorL?color[i]:color[random],
                'pointHoverBorderColor':  i<colorL?color[i]:color[random],
                'pointHoverBorderWidth': 2,
                'pointRadius': 1,
                'pointHitRadius': 10,
                'data': tempyData
            }
        }
        }
        return lineModule={
            labels: xData,
            datasets:datasets
        }
    }
    setColor(){
        return                 ["#00ffff","#000000","#0000ff","#a52a2a","#00008b","#008b8b","#a9a9a9","#006400","#bdb76b","#8b008b","#556b2f","#ff8c00","#9932cc","#8b0000","#e9967a","#9400d3","#ff00ff", "#ffd700","#008000","#4b0082","#f0e68c","#add8e6","#90ee90", "#d3d3d3","#ffb6c1","#00ff00","#ff00ff","#800000","#000080","#808000","#ffa500","#ffc0cb","#800080","#800080","#ff0000","#c0c0c0","#ffff00"]
    }
function formatDate(date) {
    /* eslint no-confusing-arrow: 0 */
    
    // const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
    // const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
    // return `${dateStr} ${timeStr}`;
    const pad = n => n < 10 ? `0${n}` : n;
    var hours = date.getHours();
    var minutes = date.getMinutes();
    //var ampm = hours >= 12 ? 'PM' : 'AM';
    hours = hours % 12;
    hours = hours ? hours : 12; // the hour '0' should be '12'
    //var strTime = hours + ':' + minutes + ' ' + ampm;
    const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
    const timeStr = `${pad(hours)}:${pad(minutes)}`;
    return `${dateStr}`;
}

getDiffDate(start, end) {
        var startTime = this.getDate(start);
        var endTime = this.getDate(end);
        var dateArr = [];
        while ((endTime.getTime() - startTime.getTime()) > 0) {
            var year = startTime.getFullYear();
            var month = startTime.getMonth().toString().length === 1 ? "0" + (parseInt(startTime.getMonth().toString(),10) + 1) : (startTime.getMonth() + 1);
            var day = startTime.getDate().toString().length === 1 ? "0" + startTime.getDate() : startTime.getDate();
            dateArr.push(year + "-" + month + "-" + day);
            startTime.setDate(startTime.getDate() + 1);
        }
        return dateArr;
    }
 getDate (datestr) {
        var temp = datestr.split("-");
        if (temp[1] === '01') {
            temp[0] = parseInt(temp[0],10) - 1;
            temp[1] = '12';
        } else {
            temp[1] = parseInt(temp[1],10) - 1;
        }
        //new Date()的月份入参实际都是当前值-1
        var date = new Date(temp[0], temp[1], temp[2]);
        return date;
    }
sortData(arr,name){
        let that = this
        arr.sort(function (item1, item2) {
        
        return that.getValue(item1,name).localeCompare(that.getValue(item2,name), 'zh-CN');
        })
        return arr
    }
    
    getValue(option,name){
        if (!name) return option
        let data = option
        name.split('.').filter(function (item) {
            data = data[item]
        })
        return data + ''
    }

代码提供思路

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值