The only difference between both for loops below are item1, item2, val1, val2, tooltip1, tooltip2. And the series name "Apple", "Carrot". Also, color "black", "green". I have until item8. So 8 for loops are in total. Can anyone suggest how I go about reducing no of lines in the code below. I believe that will help improve performance. Thank you.

// plotlines    
const item1 = [2, 6, 18]
const item2 = [5, 9, 30]
// ... have until item8

// For loop for item1

for( let val1 = 0; val1 < item1.length; val1   ) {
    if( id === 0 ) {
        if( checked ) {
            xAxis[0].addPlotLine( {
                Tooltip1: true,
                type: 'line',
                value: item1[val1],
                id: 'item1_'   item1[val1],
                color: 'black',
                width: 2,
                zIndex: 2,
                events: {
                    click: function( e ) {
                        var series = this.axis.series[0],
                            chart = series.chart,
                            PointClass = series.pointClass,
                            tooltip = chart.tooltip,
                            point = ( new PointClass() ).init(
                                series, ['Apple', this.options.value]
                            ),
                            normalizedEvent = chart.pointer.normalize( e ),
                            tooltipEnabled = chart.lastClickedPoint ? chart.lastClickedPoint.id !== this.id : true;

                        chart.update( {
                            tooltip: {
                                enabled: tooltipEnabled
                            }
                        } );

                        point.tooltipPos = [
                            normalizedEvent.chartX - chart.plotLeft,
                            normalizedEvent.chartY - chart.plotTop
                        ];
                        point.Tooltip1 = this.options.Tooltip1;

                        if( tooltipEnabled ) {
                            chart.lastClickedPoint = this;
                        } else {
                            chart.lastClickedPoint = null;
                        }

                        tooltip.refresh( point );
                    },
                    mouseout: function( e ) {
                        return false;
                    }
                }
            } );
        } else {
            xAxis[0].removePlotLine( 'item1_'   item1[val1] );
        }
    }
} // for loop ends


// For loop for item2

for( let val2 = 0; val2 < item2.length; val2   ) {
    if( id === 1 ) {
        if( checked ) {
            xAxis[0].addPlotLine( {
                Tooltip2: true,
                type: 'line',
                value: item2[val2],
                id: 'item2_'   item2[val2],
                color: 'green',
                width: 2,
                zIndex: 2,
                events: {
                    click: function( e ) {
                        var series = this.axis.series[0],
                            chart = series.chart,
                            PointClass = series.pointClass,
                            tooltip = chart.tooltip,
                            point = ( new PointClass() ).init(
                                series, ['Carrot', this.options.value]
                            ),
                            normalizedEvent = chart.pointer.normalize( e ),
                            tooltipEnabled = chart.lastClickedPoint ? chart.lastClickedPoint.id !== this.id : true;

                        chart.update( {
                            tooltip: {
                                enabled: tooltipEnabled
                            }
                        } );

                        point.tooltipPos = [
                            normalizedEvent.chartX - chart.plotLeft,
                            normalizedEvent.chartY - chart.plotTop
                        ];
                        point.Tooltip2 = this.options.Tooltip2;

                        if( tooltipEnabled ) {
                            chart.lastClickedPoint = this;
                        } else {
                            chart.lastClickedPoint = null;
                        }

                        tooltip.refresh( point );
                    },
                    mouseout: function( e ) {
                        return false;
                    }
                }
            } );
        } else {
            xAxis[0].removePlotLine( 'item2_'   item2[val2] );
        }
    }
} 

CodePudding user response：

Connect the missing info with the respective item. For example, combine the values, fruit, and color data into an object. These objects can be put into an array together and then your loop can be called in a forEach over the item list.

const item1 = {
  values: [2, 6, 18],
  fruit: 'Apple',
  color: 'black',
};

const item2 = {
  values: [5, 9, 30],
  fruit: 'Carrot',
  color: 'green',
};

const items = [item1, item2];

items.forEach((item) => {  
    for(let i = 0; i< item.length; val   ){
        // your existing code here
        // get the info from the item to fill out your fields
    }
});