Question

我正在使用flot图表。我想绘制每秒更新的图表，并且还想添加关闭和打开数据系列的功能。我能够使它工作，但有一些我没想到的问题，比如当其他系列关闭时，一个系列的颜色会发生变化;另外，当我更新数据系列数组时，图表似乎会移动，但它会从右侧移除元素，同时新值会在右侧绘制...

    var d1 = [] ;
    var d2 = [] ;
    var d3 = [] ;


$(function(){



    {%for reading in readings%}
            var time_stamp = parseFloat({{reading['timestamp']}} + 19800.00) * 1000
            var A = parseFloat({{reading['values']['A']}})  ;
            var V = parseFloat({{reading['values']['VLN']}}) - 50 ;
            var W = parseFloat({{reading['values']['W']}}) / 1000 ;

            d1.push([time_stamp,A]);
            d2.push([time_stamp,V]);
            d3.push([time_stamp,W]);
    {%endfor%}

    var datasets = {
                "current":{
                        label : "A",
                        data : d1
                },
                "voltage":{
                    label : "V",
                    data : d2
                },
                "power":{
                    label : "W",
                    data : d3
                },


    }


    var i = 0;
        $.each(datasets, function(key, val) {
            val.color = i;
            ++i;
    });



    // insert checkboxes 
    var choiceContainer = $("#choices");
    $.each(datasets, function(key, val) {
        choiceContainer.append("<br/><input type='checkbox' name='" + key +
            "' checked='checked' id='id" + key + "'></input>" +
            "<label for='id" + key + "'>"
            + val.label + "</label>");
    });


    choiceContainer.find("input").click(plotAccordingToChoices);

    function plotAccordingToChoices() {


            var data = [];

            choiceContainer.find("input:checked").each(function () {
                var key = $(this).attr("name");
                if (key && datasets[key]) {

                    data.push(datasets[key]);
                }
            });

            if (data.length > 0) {
                $.plot("#placeholder", data, {
                    series: {
                        shadowSize: 0,
                        lines: {
                            show: true
                        },

                    },
                    yaxis: {
                        min: 0
                    },
                    xaxis: {
                        tickDecimals: 0,
                        mode:"time"
                    }
                });
            }


            setTimeout(getNextDataset,1000);

        }



        plotAccordingToChoices();

});

function getNextDataset()
        {

            $.ajax({url : '/newdata' , success:function(result){
                    reading =JSON.parse(result);
                    var time_stamp = (parseFloat(reading.timestamp) + 19800.00) * 1000
                    var A = parseFloat(reading.values.A) ;
                    var W = parseFloat(reading.values.W) / 1000 ;
                    var V = parseFloat(reading.values.VLN) - 50 ;

                    d1.shift();d2.shift();d3.shift();

                    d1.push([time_stamp,A]);
                    d2.push([time_stamp,V]);
                    d3.push([time_stamp,W]);


                    var datasets = {
                                "current":{
                                        label : "A",
                                        data : d1
                                },
                                "voltage":{
                                    label : "V",
                                    data : d2
                                },
                                "power":{
                                    label : "W",
                                    data : d3
                                },
                    }


                    var data = [] ;
                    var choiceContainer = $("#choices");
                    choiceContainer.find("input:checked").each(function () {
                        var key = $(this).attr("name");
                        if (key && datasets[key]) {

                            data.push(datasets[key]);
                        }
                    });


                    if (data.length > 0) {

                        $.plot("#placeholder", data, {
                            series: {
                                shadowSize: 0,
                                lines: {
                                    show: true
                                },
                                points:{
                                    show:false
                                },

                            },
                            yaxis: {
                                min: 0
                            },
                            xaxis: {
                                tickDecimals: 0,
                                mode:"time"
                            }
                        });
                    }

                }
            });

            setTimeout(getNextDataset,1000) ;
        }

`

我正在使用flot图表中的代码示例。我哪里出错？谢谢？

Answer 1

问题1：每次选中或取消选中复选框时都会更新颜色原因：每次触发复选框点击事件时，都会有一些颜色如何用于更新解决方案：删除了setTimeout（getNextDataset，1000）;来自功能图的调用按照ToChoices（）

问题2：数据元素从右侧而不是左侧移除原因:(非常愚蠢）数据按降序排列，我只按顺序使用推送数据。最新点位于阵列的位置0，最旧点位于位置n-1。我正在移除（n- 1）th。点解决方案：用unshift（）替换了开头的推送。魔术：P

使用flot api绘制实时数据并打开和关闭数据系列

1 个答案: