Повторение кода Javascript

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 и категории в качестве аргументов.Таким образом, вы можете свести каждую диаграмму к одному вызову функции.

Answer 2

Вы можете сделать массив из массива

dataOld = [dataOld1, dataOld2, dataOld3];

И получить результат, используя dataOld [i] [j] и 2 for () loop?

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 устаревшим!