我正在进行使用flot显示数据所需的温度项目。我发现那个家伙在做和我几乎相同的项目。这是链接：温度jquery flot
在flot代码中，我用想要放入的数据替换了一些代码。（我只替换了两个地方，没有得到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>
我在这里根据评论制定了我的答案。首先，修复yaxis定义中的"20>"值，然后确保所有javascript文件与projectFlot.html文件位于同一目录中，然后所有名称都对应。另一件事是，您正在导入jquery.flot.js和jquery.js两次！因此移除最后一行CCD_ 2，甚至移除第二行<script type="text/javascript" src="jquery.flot.js"></script>。