0
我正在使用flot来显示数据所需的温度项目。我找到了和我一样做同样项目的人。这里是链接：temperature jquery flotFlot故障显示温度的图形
在海军报的代码，我更换了一些代码的数据，我想投入（只有两个地方我更换，没有得到PHP的值，以方便）像
var dat = [ [123456789, 20.9],[1234654321, 22.1] ];
yaxis: { min: 20, max: 20>, tickFormatter: function (v, axis) { return v.toFixed(axis.tickDecimals) +"°C " }},
这里是代码：当我显示html页面时什么也没有发生。请帮忙 ！！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flot For Project</title>
<script src="jquery.js" language="javascript" type="text/javascript"></script>
<script src="jquery.flot.js" language="javascript" type="text/javascript"></script>
<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.pack.js"></script><![endif]-->
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="jquery.flot.time.js"></script>
<script type="text/javascript" src="jquery.flot.symbol.js"></script>
<script type="text/javascript" src="jquery.flot.axislabels.js"></script>
<script type="text/javascript" src="jquery.colorhelpers.js"></script>
<script type="text/javascript" src="jquery.flot.canvas.js"></script>
<script type="text/javascript" src="jquery.flot.categories.js"></script>
<script type="text/javascript" src="jquery.flot.crosshair.js"></script>
<script type="text/javascript" src="jquery.fillbetween.js"></script>
<script type="text/javascript" src="jquery.flot.image.js"></script>
<script type="text/javascript" src="jquery.flot.navigate.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
var dat = [ [123456789, 20.9],[1234654321, 22.1] ];
var options = {
xaxis: { mode: "
time ", timeformat: " % h: % M % d. % m. % y ", labelWidth: "
10 " },
series: {
lines: { show: true, fill: true, fillColor: "
rgba(0, 0, 0, 0.2)" },
points: { show: true, fill: false },
shadowSize: 5,
color: "
rgba(0, 0, 0, 0.8)"
},
grid: { hoverable: true, clickable: true },
yaxis: { min: 20, max: 20>, tickFormatter: function (v, axis) { return v.toFixed(axis.tickDecimals) +"°C " }},
selection: { mode: "
x ", color: "
rgba(125, 0, 0, 0.6)" },
legend: { show: true, position: "
se ", backgroundOpacity: 0.4, backgroundColor: "
rgb(255, 255, 255)", labelBoxBorderColor: "
rgb(0, 0, 0)"},
};
var plot = $.plot($("#placeholder "),
[ { data: dat, label: "
Study Temp ", color:"
#333"} ], options);
var overview = $.plot($("#overview"), [{
data: dat,
label: "Min: °C, Max: °C",
color: "#333"
}], {
series: {
color: "rgba(0,0,0,0.8)",
lines: {
show: true,
lineWidth: 1,
fill: true,
fillColor: "rgba(0,0,0,0.2)"
},
shadowSize: 0
},
xaxis: {
ticks: [],
mode: "time"
},
yaxis: {
ticks: [],
min: 0,
autoscaleMargin: 0.1
},
selection: {
mode: "x",
color: "rgba(125,0,0,0.6)"
},
legend: {
show: true,
position: "se",
backgroundOpacity: 1,
backgroundColor: "rgb(255,255,255)",
labelBoxBorderColor: "rgb(0,0,0)"
}
});
$("#placeholder").bind("plotselected", function (event, ranges) {
plot = $.plot($("#placeholder"), [dat],
$.extend(true, {}, options, {
xaxis: {
min: ranges.xaxis.from,
max: ranges.xaxis.to
}
}));
overview.setSelection(ranges, true);
});
$("#overview").bind("plotselected", function (event, ranges) {
plot.setSelection(ranges);
});
var humanTime;
var jstime;
function showTimes(t) {
var datum = new Date(parseFloat(t));
humanTime = datum.toUTCString();
}
function showTooltip(x, y, contents) {
$('
' + contents + '
').css({
position: 'absolute',
display: 'none',
top: y + 25,
left: x + 0,
border: '2px solid #777',
padding: '2px',
'font-family': 'Arial',
'font-size:': '1.2em',
'font-weight': 'bold',
'background-color': '#ddd',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(0),
y = item.datapoint[1].toFixed(2);
showTimes(x);
showTooltip(item.pageX, item.pageY,
y + "°C (at " + humanTime + "+1000)");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
});
</script>
</head >
<body>
<div id="placeholder" style="height:400px;width=400px;">
</div>
<p>Flot Temperature realtime update.</p>
</body>
</html>
我只是评论，这不是一个真正的答案。可以肯定的是，你有没有看到“max”值在末尾有一个“>”字符（'yaxis'定义中的'max：20>'）？这是复制/粘贴问题吗？ –
[18：20：21.601] TypeError：$ .plot不是一个函数@ file：///User/renren/flot/projectFlot.html：46 – Yang
$ .plot是一个JQuery Flot函数，如你所知，所以它似乎jquery.flot.js没有正确加载，所以请确保它驻留在此代码所在的目录中，并且它具有此名称。 –