Question

我有一个包含大约16个图表的仪表板。除数据外，图表的所有设置都非常相似。以下是代码。有什么方法可以优化代码。现在代码已接近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',

Answer 1

你应该把整个东西变成一个以dataOld1和categories为参数的函数。这样，您可以将每个图表缩减为单个函数调用。

Answer 2

你可以创建一个数组数组

dataOld = [dataOld1, dataOld2, dataOld3];

通过使用dataOld [i] [j]和2 for（）循环获得结果？

Answer 3

为什么不这样做而不是使用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循环过时！

重复Javascript代码

3 个答案: