0

私はJavaScriptとjQueryのことは初めてです。複数のリアルタイム グラフを作成したいので、グーグルで調べたところ、canvasjs を使用してこれを実現できることがわかりました。3 つの異なるグラフを 1 つの jsp に含めるために 3 つの異なる JavaScript 関数を作成しました。すべての関数は、データ用に個別のサーブレットにポーリングします。データポイントがデータシリーズに蓄積し始めると、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();

    });

}
4

1 に答える 1

0

各データポイントのチャートをレンダリングしています。代わりに、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;
},
于 2016-01-19T07:14:36.467 に答える