0

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

    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) ;
        }

`

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

4

1 回答 1

1

问题 1：每次选中或未选中复选框时颜色更新
原因：每次触发复选框单击事件时，颜色如何更新
解决方案：删除 setTimeout(getNextDataset,1000); 从函数 plotAccordingToChoices() 调用

问题2：数据元素是从右边而不是左边删除的。
原因：（非常愚蠢）数据按降序排列，我只按该顺序使用推送数据。所以最新点位于数组的位置 0，最旧的点位于位置 n-1。我正在删除（n- 1）点。
解决方案：将一开始的 push 替换为 unshift().Did 魔术：P

于 2013-07-30T06:08:30.273 回答