Question

我是JavaScript和jQuery的新手。我想创建多个实时图形，所以在谷歌搜索后我发现我可以使用canvasjs实现这一点。我创建了三个不同的JavaScript函数，在单个jsp中包含三个不同的图形，每个函数轮询到一个单独的servlet用于数据。随着数据点开始在数据集中累积，我的UI卡住并变得缓慢。我究竟做错了什么？绘制实时数据的正确结构应该是什么？任何有关此主题的帮助将不胜感激。

我也在发布我的JavaScript函数。

function load_A(){

    var dps = []; //dataPoints. 

    jQuery.post("Update_A").done(function(responseJson) { 
        jQuery.each(responseJson, function(key, value) {

            dps.push({
                x : new Date(key),
                y : value,
            //  label : key
            });
            alert(key + " " + value);
        });

        var chart = new CanvasJS.Chart("chartContainer_A", {
            zoomEnabled : true,
            backgroundColor : "black",
            title : {
                text : "POC_A",
                fontColor : "red",
                fontSize : 24,
                fontFamily : "TimesNewRoman",
                fontWeight : "bolder",
                padding : 10

            },
            axisX:{
                title : "Time",
                titleFontWeight: "bolder",
                titleFontColor: "red",
                lineThickness: 3,
                lineColor: "lightgreen",
        //      gridThickness: 0.25,
                gridColor: "orange",
                gridDashType: "dash",
                labelFontColor: "lightgreen",
        //      interlacedColor: "#191919" ,
                intervalType: "second",
                interval: 1,
                valueFormatString: "hh:mm:ss", 
            }, 
            axisY : {
                title : "Random no.",
                titleFontWeight: "bolder",
                titleFontColor: "red",
                lineThickness: 5,
                lineColor: "lightgreen",
        //      gridThickness: 0.25,
                gridColor: "orange",
                gridDashType: "dash",
                labelFontColor: "lightgreen"
            },
            data : [ {
                type : "line",
                xValueType : "dateTime",
                dataPoints : dps
            } ]
        });

        chart.render();

        function poll_A() {

            jQuery.ajax({
                url : "Update_A",
                type : "POST",
                success : function(data) {
                    jQuery.each(data, function(key, value) {
                        dps.push({
                            x : new Date(key),
                            y : value
                        });
                        chart.render();
                        chart.options.title.text = "POC_A " + value;
                    });
                },
                dataType : "json",
                complete : function() {
                setTimeout(poll_A,1000);
                },
                timeout: 2000
            });

    }

    poll_A();

    });

}

Answer 1

您正在为每个数据点呈现图表。而是尝试为每个ajax调用渲染图表。

success : function(data) {
    jQuery.each(data, function(key, value) {
         dps.push({
         x : new Date(key),
         y : value
         });
    });
chart.render();
chart.options.title.text = "POC_A " + value;
},

如何使用canvasjs创建多个实时图形而不会使UI变慢？

1 个答案: