如何优化图形

Question

此代码是使用 asp.net 的后端编写的，但图表绘制花费了太多时间，因此页面变得无响应。

请帮助优化。对不起，如果这是一个明显的问题，我是 JS 新手。我检查了数据集的后端 asp 代码，它及时给出了结果，我确信这是一个 JS 问题

chart = new CanvasJS.Chart("lineContainer1", {
            theme: "light1",
            zoomEnabled: true,
            exportEnabled: true,
            zoomType: "x",
            title:
            {

            },
            backgroundColor: 'white',
            axisX: {
                showInLegend: true,
                includeZero: true,
                labelAngle: 0,
                titleFontSize: 12,      //20
                labelFontSize: 12,         //15
                titleFontColor: "black",
                lineColor: "black",
                labelFontColor: "black",
                labelFormatter: function (e) {
                    return CanvasJS.formatDate(e.value, "hh:mm TT");
                },
                titleFontWeight: "bold",
                labelFontWeight: "bold",
            },
            axisY:

            {
                includeZero: false,
                title: "Element",
                titleFontColor: "black",
                tickColor: "black",
                lineColor: "black",
                labelFontColor: "black",
                gridDashType: "dot",
                titleFontSize: 12,
                labelFontSize: 12,
                titleFontWeight: "bold",
                labelFontWeight: "bold",
            }
            ,
            axisY2:
            {
                minimum: 0,
                maximum: 2,
                titleFontWeight: "bold",
                labelFontWeight: "bold",
            },
            axisX2:
            {
                showInLegend: true,
                includeZero: true,
                labelAngle: 0,
                titleFontSize: 12,      //20
                labelFontSize: 12,         //15
                titleFontColor: "black",
                lineColor: "black",
                labelFontColor: "black",
                labelFormatter: function (e) {
                    return CanvasJS.formatDate(e.value, "hh:mm TT");
                },
            },
            toolTip: {
                content: "{name}: {y}"

            },

            legend: {
                cursor: "pointer",
                fontSize: 12
            },
            dataPointWidth: 3,
            data: []
        });

        var dataPoints1 = [], dataPoints2 = [], dataPoints3 = [], dataPoints4 = [];
        var dataPoints5 = [], dataPoints6 = [], dataPoints7 = [], dataPoints8 = [];
        var dataPoints9 = [], dataPoints10 = [], dataPoints11 = [], dataPoints12 = [];


        for (var i = 0; i < GloabalArr.length; i++) {
            if (i == 0) {
                var caTime = "", startTime = "", endtTime = "";

                if (GloabalArr[0][12] != "") {
                    //    10
                    //User ImageDevelopers Login
                    //LF STATION    
                    //T50217 : L1

                    var vTime = GloabalArr[i][12];
                    var elem = vTime.split(' ');
                    var stSplit1 = elem[0].split("-");
                    var stSplit2 = elem[1].split(":");
                    var vYear = parseFloat(stSplit1[2]);
                    var vMonth = parseFloat(stSplit1[1] - 1);
                    var vDay = parseFloat(stSplit1[0]);
                    var vHour = parseFloat(stSplit2[0]);
                    var vMins = parseFloat(stSplit2[1]);
                    var vSecs = parseFloat(stSplit2[2]);
                    caTime = new Date(vYear, vMonth, vDay, vHour, vMins, vSecs);
                }
                if (GloabalArr[0][10] != "") {
                    vTime = GloabalArr[i][10];
                    elem = vTime.split(' ');
                    stSplit1 = elem[0].split("-");
                    stSplit2 = elem[1].split(":");
                    vYear = parseFloat(stSplit1[2]);
                    vMonth = parseFloat(stSplit1[1] - 1);
                    vDay = parseFloat(stSplit1[0]);
                    vHour = parseFloat(stSplit2[0]);
                    vMins = parseFloat(stSplit2[1]);
                    vSecs = parseFloat(stSplit2[2]);
                    var startTime = new Date(vYear, vMonth, vDay, vHour, vMins, vSecs);
                }
                if (GloabalArr[0][11] != "") {
                    vTime = GloabalArr[i][11];
                    elem = vTime.split(' ');
                    stSplit1 = elem[0].split("-");
                    stSplit2 = elem[1].split(":");
                    vYear = parseFloat(stSplit1[2]);
                    vMonth = parseFloat(stSplit1[1] - 1);
                    vDay = parseFloat(stSplit1[0]);
                    vHour = parseFloat(stSplit2[0]);
                    vMins = parseFloat(stSplit2[1]);
                    vSecs = parseFloat(stSplit2[2]);
                    var endtTime = new Date(vYear, vMonth, vDay, vHour, vMins, vSecs);
                }
                if (startTime != "") {
                    dataPoints10.push({ x: startTime, y: parseFloat(1), Start: GloabalArr[i][10] });
                }
                if (caTime != "") {
                    dataPoints11.push({ x: caTime, y: parseFloat(1), CaT: GloabalArr[i][12] });
                }
                if (endtTime != "") {

                    dataPoints12.push({ x: endtTime, y: parseFloat(1), End: GloabalArr[i][11] });
                }

            }
            else {
                if (i == 1)
                    continue;

                if (GloabalArr[i][13] != "" && GloabalArr[i][13] != null) {
                    vTime = GloabalArr[i][13];
                    elem = vTime.split(' ');
                    stSplit1 = elem[0].split("-");
                    stSplit2 = elem[1].split(":");
                    vYear = parseFloat(stSplit1[2]);
                    vMonth = parseFloat(stSplit1[1] - 1);
                    vDay = parseFloat(stSplit1[0]);
                    vHour = parseFloat(stSplit2[0]);
                    vMins = parseFloat(stSplit2[1]);
                    vSecs = parseFloat(stSplit2[2]);
                    var Time = new Date(vYear, vMonth, vDay, vHour, vMins, vSecs);
                    dataPoints8.push({ x: Time, y: parseFloat(GloabalArr[i][8]), arc: GloabalArr[i][8] });
                    dataPoints9.push({ x: Time, y: parseFloat(GloabalArr[i][9]), bypass: GloabalArr[i][9] });

                }
                else {
                    if (GloabalArr[i][0] != "" && GloabalArr[i][0] != null) {

                        var vTime = GloabalArr[i][0];
                        var elem = vTime.split(' ');
                        var stSplit1 = elem[0].split("-");
                        var stSplit2 = elem[1].split(":");
                        var vYear = parseFloat(stSplit1[2]);
                        var vMonth = parseFloat(stSplit1[1] - 1);
                        var vDay = parseFloat(stSplit1[0]);
                        var vHour = parseFloat(stSplit2[0]);
                        var vMins = parseFloat(stSplit2[1]);
                        var vSecs = parseFloat(stSplit2[2]);
                        var fTime = new Date(vYear, vMonth, vDay, vHour, vMins, vSecs);
                        var vYaxis1 = GloabalArr[i][1];
                        var vYaxis2 = GloabalArr[i][2];
                        var vYaxis3 = GloabalArr[i][3];
                        var vYaxis4 = GloabalArr[i][4];
                        var vYaxis5 = GloabalArr[i][5];
                        var vYaxis6 = GloabalArr[i][6];
                        var vYaxis7 = GloabalArr[i][7];
                        dataPoints1.push({ x: fTime, y: parseFloat(vYaxis1) });
                        dataPoints2.push({ x: fTime, y: parseFloat(vYaxis2) });
                        dataPoints3.push({ x: fTime, y: parseFloat(vYaxis3) });
                        dataPoints4.push({ x: fTime, y: parseFloat(vYaxis4) });
                        dataPoints5.push({ x: fTime, y: parseFloat(vYaxis5) });
                        dataPoints6.push({ x: fTime, y: parseFloat(vYaxis6) });
                        dataPoints7.push({ x: fTime, y: parseFloat(vYaxis7) });
                    }
                }

            }
        }

        dataPoints1.sort(function (a, b) {
            chart.render();
            return a.x - b.x
        })
        dataPoints2.sort(function (a, b) {
            chart.render();
            return a.x - b.x
        })
        dataPoints3.sort(function (a, b) {
            chart.render();
            return a.x - b.x
        })
        dataPoints4.sort(function (a, b) {
            chart.render();
            return a.x - b.x
        })
        dataPoints5.sort(function (a, b) {
            chart.render();
            return a.x - b.x
        })
        dataPoints6.sort(function (a, b) {
            chart.render();
            return a.x - b.x
        })
        dataPoints7.sort(function (a, b) {
            chart.render();
            return a.x - b.x
        })
        dataPoints8.sort(function (a, b) {
            chart.render();
            return a.x - b.x
        })
        dataPoints9.sort(function (a, b) {
            chart.render();
            return a.x - b.x
        })
        dataPoints10.sort(function (a, b) {
            chart.render();
            return a.x - b.x

        })
        dataPoints11.sort(function (a, b) {
            chart.render();
            return a.x - b.x

        })
        dataPoints12.sort(function (a, b) {
            chart.render();
            return a.x - b.x

        })

        chart.options.data.push(
            {
                axisYIndex: 1,
                type: "line",
                name: "Line1 FLow SP",
                showInLegend: false,
                lineThickness: 1,
                color: "#33cccc",
                lineColor: "#33cccc",
                xValueFormatString: "hh:mm:ss TT",
                dataPoints: dataPoints1

            },
            {
                axisYIndex: 1,
                type: "line",
                name: "Line1 FLow PV",
                showInLegend: false,
                lineThickness: 1,
                legendMarkerColor: "#0099cc",
                color: "#0099cc",
                lineColor: "#0099cc",
                xValueFormatString: "hh:mm:ss TT",
                dataPoints: dataPoints2
            },
            {
                axisYIndex: 1,
                type: "line",
                name: "Inlet Press SP",
                showInLegend: false,
                lineThickness: 1,
                legendMarkerColor: "#ff3300",
                color: "#ff3300",
                lineColor: "#ff3300",
                xValueFormatString: "hh:mm:ss TT",
                dataPoints: dataPoints3
            },
            {
                axisYIndex: 1,
                type: "line",
                name: "Inlet Press PV",
                showInLegend: false,
                lineThickness: 1,
                legendMarkerColor: "#6600cc",
                color: "#6600cc",
                lineColor: "#6600cc",
                xValueFormatString: "hh:mm:ss TT",
                dataPoints: dataPoints4
            },
            {
                axisYIndex: 1,
                type: "line",
                name: "Line1 Valve Opening",
                showInLegend: false,
                lineThickness: 1,
                legendMarkerColor: "#ff3399",
                color: "#ff3399",
                lineColor: "#ff3399",
                xValueFormatString: "hh:mm:ss TT",
                dataPoints: dataPoints5
            },
            {
                axisYIndex: 1,
                type: "line",
                name: "Line1 Back Press",
                showInLegend: false,
                lineThickness: 1,
                legendMarkerColor: "#009900",
                color: "#009900",
                lineColor: "#009900",
                xValueFormatString: "hh:mm:ss TT",
                dataPoints: dataPoints6
            },
            {
                axisYIndex: 1,
                type: "line",
                name: "Inlet Press From PRS",
                showInLegend: false,
                lineThickness: 1,
                legendMarkerColor: "#336699",
                color: "#336699",
                lineColor: "#336699",
                xValueFormatString: "hh:mm:ss TT",
                dataPoints: dataPoints7
            },
            {
                axisYIndex: 1,
                axisYType: "secondary",
                type: "line",
                name: "Bypass Status",
                showInLegend: false,
                lineThickness: 1,
                legendMarkerColor: "#009999",
                color: "#009999",
                lineColor: "#009999",
                xValueFormatString: "hh:mm:ss TT",
                dataPoints: dataPoints8
            },
            {
                axisYIndex: 1,
                type: "line",
                axisYType: "secondary",
                name: "Arcing Status",
                showInLegend: false,
                lineThickness: 1,
                legendMarkerColor: "#cc0099",
                color: "#cc0099",
                lineColor: "#cc0099",
                xValueFormatString: "hh:mm:ss TT",
                dataPoints: dataPoints9
            },
            {
                axisYIndex: 2,
                axisYType: "secondary",

                type: "column",
                name: "Heat Start",
                toolTipContent: "<strong>{name}</strong></br> <strong>Heat Start Time: {Start}</strong>",
                showInLegend: false,
                lineThickness: 1,
                legendMarkerColor: "#009900",
                color: "#009900",
                lineColor: "#009900",
                xValueFormatString: "hh:mm:ss TT",
                dataPoints: dataPoints10
            },
            {
                axisYIndex: 2,
                axisYType: "secondary",

                type: "column",
                name: "Ca addition Time",
                toolTipContent: "<strong>{name}</strong></br><strong>CA Addition Time:{CaT}</strong>",
                showInLegend: false,
                lineThickness: 1,
                legendMarkerColor: "#000066",
                color: "#000066",
                lineColor: "#000066",
                xValueFormatString: "hh:mm:ss TT",
                dataPoints: dataPoints11
            },
            {
                axisYIndex: 2,
                type: "column",
                axisYType: "secondary",
                name: "Heat End",
                toolTipContent: "<strong>{name}</strong></br> <strong>Heat End Time: {End}</strong>",
                showInLegend: false,
                lineThickness: 1,
                legendMarkerColor: "#800000",
                color: "#800000",
                lineColor: "#800000",
                xValueFormatString: "hh:mm:ss TT",
                dataPoints: dataPoints12
            },

        );

        for (i = 0; i < 12; i++) {

            chart.options.data[i].visible = false;


        }


        chart.render();
        ZoomLineGraph();

Answer 1

dataPoints1.sort(function (a, b) {
        chart.render();
        return a.x - b.x
    })
    dataPoints2.sort(function (a, b) {
        chart.render();
        return a.x - b.x
    })
...

上面的代码可以这样简化：

const sortFunc = (a, b) => {
    chart.render();
    return a.x - b.x;
};

dataPoints1.sort(sortFunc);
dataPoints2.sort(sortFunc);
....

因此您只需声明一次函数，这应该会提高性能。

所以这是一个开始。但是你的代码有很多低效率的地方。我不是来为你做你的工作的。我在这里帮助您找到自己解决问题的方法。

我建议你问问自己，当全局变量几乎从来都不是一个好主意时，为什么要使用看起来像全局变量 (GloabalArr) 的东西。或者为什么要将数据点分成多个数组，而不是一个数组。