重复Javascript代码

Repeating Javascript Code

本文关键字:代码 Javascript 重复      更新时间:2023-09-26

我有一个包含大约16个图的仪表板。除了数据之外,Graph的所有设置都非常相似。下面是代码。有什么方法可以优化代码吗。目前,代码已接近2000行。

// Chart 1
var chart1;
// globally available
var dataOld1 = [12, 45, 30, 80];
var dataNew1 = [];
var limit1 = 35;
var limit2 = 60;
var color = '#E41B17';
for(var i = 0; i < dataOld1.length; i++) {
    var valueO = dataOld1[i];
    if(valueO <= limit2 && valueO >= limit1) {
        // Amber
        var fillColor = '#FFE87C';
        var complete = "{fillColor:'" + fillColor + "',y:" + valueO + "}";
        dataNew1[i] = complete;
    } else if(valueO > limit2) {
        // Green
        var fillColor = '#4CC552';
        var complete = "{fillColor:'" + fillColor + "',y:" + valueO + "}";
        dataNew1[i] = complete;
    } else {
        // Red
        var fillColor = '#E41B17';
        var complete = "{fillColor:'" + fillColor + "',y:" + valueO + "}";
        dataNew1[i] = complete;
    }
}
var newData1 = []
for(var i = 0; i < dataOld1.length; i++) {
    var obj = eval('(' + dataNew1[i] + ')');
    newData1[i] = obj;
}
var categories = ['15 Jan', '22 Jan', '29 Jan', '5 Feb'];
$(document).ready(function() {
    chart1 = new Highcharts.Chart({
        chart : {
            renderTo : 'mainchart1',
            type : 'line',
            fontSize : '1px',
            shadow : false,
            marginLeft : 33,
            height : 125,
            width : 165,
        },
        title : {
            text : null
        },
        xAxis : {
            categories : categories,
            lineWidth : 1,
            lineColor : '#000',
        },
        yAxis : {
            title : {
                text : null
            },
            lineWidth : 1,
            lineColor : '#000',
            min : 0,
            max : 100,
            minRange : 20,
            minorGridLineColor : '#E0E0E0',
            minorTickInterval : 'auto',
            maxPadding : 0,
            gridLineColor : '#CCC',
            gridLineWidth : 1,
            legend : {
                enabled : false
            },
            labels : {
                formatter : function() {
                    return this.value + '%';
                }
            }
        },
        tooltip : {
            formatter : function() {
                return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + '%';
            }
        },
        legend : {
            enabled : false
        },
        series : [{
            data : newData1
        }],
        plotOptions : {
            series : {
                name : 'Team Briefing',
                shadow : false,
                marker : {
                    lineWidth : 2,
                    radius : 6,
                    symbol : 'circle'
                }
            }
        },
        exporting : {
            enabled : false
        }
    });
});

只有这些数据才会改变

var dataOld1 = [12, 45, 30, 80];
var categories = ['15 Jan', '22 Jan', '29 Jan', '5 Feb'];
renderTo : 'mainchart1',

您应该将整件事变成一个以dataOld1和categories为参数的函数。通过这种方式,您可以将每个图表简化为一个函数调用。

您可以制作阵列的阵列

dataOld = [dataOld1, dataOld2, dataOld3];

使用dataOld[i][j]和2 for()循环得到结果?

为什么不这样做而不使用eval

for(var i = 0; i < dataOld1.length; i++) {
    var fillColor;
    if(valueO <= limit2 && valueO >= limit1) {
        // Amber
        fillColor = '#FFE87C';
    } else if(valueO > limit2) {
        // Green
        fillColor = '#4CC552';
    } else {
        // Red
        fillColor = '#E41B17';
    }
    dataNew[i] = { 'fillColor': fillColor, y: dataOld1[i] };
}

这将使下一个for循环过时!