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 軸の値が変更されたときに線が描画されない場合に、これが発生する理由の手がかりが見つかりませんでした。