浮動0.8.1縮放即使x軸和y軸數據變化也不會畫線

Question

我在x軸上有時間序列，在y軸上有一些功率瓦特信息。 占位符和概覽圖都第一次良好顯示。 當我選擇概覽圖區域時，占位符圖中的值會發生變化，但它會顯示或繪制任何線條。

JavaScript代碼：

function graph(jsonarray) {
    var options = {
        yaxis: {
            /* color:"#00FF00",
                  tickColor:"#FF0000",font: "sans 9px",reserveSpace: true,
                  axisLabel: "Watts",
            axisLabelUseCanvas: true*/
        },
        xaxis: {
            mode: "time",
            timeformat: "%H:%M:%S",
            minTickSize: [1, "second"]
        },
        lines: {
            show: true
        },
        points: {
            show: false,
            hoverable: true
        },
        grid: {
            show: true,
            hoverable: true,
            clickable: true,
            backgroundColor: {
                colors: ["#fff", "#eee"]
            }
        },
        legend: {
            show: false,
            type: "canvas",
            position: "se",
            backgroundColor: "#ff4",
            backgroundOpacity: 0.35
        },
        selection: {
            mode: "xy"
        }
    }
    var d2 = JSON.stringify(jsonarray);
    var d1 = eval(jsonarray);
    globalJson = d1;
    var data = [];
    for (var i = 0; i < d1.length; i++) {
        var temp = (d1[i].datetime.time) + 19800000; //GMT 5:30 is added to get actul time
        data.push([temp, d1[i].watts]);
    }
    var plot = $.plot($("#placeholder1"), [data], options);
    var overviewoptions = {
        legend: {
            show: false
        },
        series: {
            lines: {
                show: true,
                lineWidth: 1
            },
            shadowSize: 0
        },
        yaxis: {},
        xaxis: {
            mode: "time",
            timeformat: "%H:%M:%S",
            minTickSize: [1, "second"]
        },
        grid: {
            color: "#999"
        },
        selection: {
            mode: "xy"
        }
    }
    var overview = $.plot("#overview", [data], overviewoptions);
    // now connect the two
    $("#placeholder1").bind("plotselected", function (event, ranges) {
        // clamp the zooming to prevent eternal zoom
        if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) {
            ranges.xaxis.to = ranges.xaxis.from + 0.00001;
        }
        if (ranges.yaxis.to - ranges.yaxis.from < 0.00001) {
            ranges.yaxis.to = ranges.yaxis.from + 0.00001;
        }
        // do the zooming
        plot = $.plot("#placeholder1", trimData(eval(jsonarray), ranges.xaxis.from, ranges.xaxis.to),
        $.extend(true, {}, overviewoptions, {
            xaxis: {
                min: ranges.xaxis.from,
                max: ranges.xaxis.to
            },
            yaxis: {
                min: ranges.yaxis.from,
                max: ranges.yaxis.to
            },
        }));
        // don't fire event on the overview to prevent eternal loop
        overview.setSelection(ranges, true);
    });
    $("#overview").bind("plotselected", function (event, ranges) {
        plot.setSelection(ranges);
    });
    return true;
}

下面是兩個輸出圖像。 （抱歉，無法附加（因為我沒有10點聲望）。我找不到任何線索來解釋為什么在x和y軸值更改但未畫線時會發生這種情況。

Answer 1

您的原始數據以如下數組形式提供：

[[time, watts], ...]

如果您的注釋正確，則trimData的輸出似乎完全不同。 對象數組將被解釋為單獨的序列，如果嘗試將它們繪制為線，則會產生空結果。

您應該修正trimData以匹配原始格式，或者完全跳過它，因為Flot僅會顯示出現在范圍內的那些點。 精簡數據的唯一原因是如果您的數據量很大，並且擔心性能。