1

我在 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 轴值发生变化但未绘制线时会发生这种情况。

4

1 回答 1

1

您的原始数据以数组形式提供，如下所示：

[[time, watts], ...]

如果您的评论准确，则 trimData 的输出似乎完全不同。对象数组将被解释为单独的系列，如果您尝试将它们绘制为一条线，则会产生空结果。

您应该修复 trimData 以匹配原始格式或完全跳过它，因为 Flot 只会显示出现在范围内的那些点。减少数据的唯一原因是如果您有大量数据，并且担心性能。

于 2013-06-14T14:42:16.927 回答