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

2つの出力画像は以下です。(申し訳ありませんが添付できませんでした (私は 10 の評判を持っていないため)。x 軸と y 軸の値が変更されたときに線が描画されない場合に、これが発生する理由の手がかりが見つかりませんでした。

4

1 に答える 1