gpt4 book ai didi

javascript - Flot 无法在某些浏览器上呈现图表

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:16:44 28 4
gpt4 key购买 nike

我有一个包含 2 个系列的简单折线图,x 轴是日期,y 轴是整数。说明这一点的代码如下:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language="javascript" src="flot/jquery.js"></script>
<script type="text/javascript" language="javascript" src="flot/jquery.flot.js"></script>
<style type="text/css">
#overview-plot24 {
width: 94%;
margin-left: 20px;
height: 220px;
}
</style>

<script type="text/javascript">
$(function() {
var plotOptions = {
//Options go here
xaxis: {
mode: "time",
tickLength: 5,
reserveSpace: true,
autoscaleMargin: 0.01
},
yaxis: {
min: 0
},
legend: {
show: false
},
series: {
lineWidth: 1,
shadowSize: 0
},
grid: {
hoverable: true,
clickable: true
}
};

var plot2 = $.plot(
'#overview-plot24', [
{
label: "Alerts",
color: "#FC8200",
data: [
[Date.parse("2013-03-19 15:00"), 9650],
[Date.parse("2013-03-19 16:00"), 33124],
[Date.parse("2013-03-19 17:00"), 27806],
[Date.parse("2013-03-19 18:00"), 24143],
[Date.parse("2013-03-19 19:00"), 7573],
]},
{
label: "Scores",
color: "#8000FF",
data: [
[Date.parse("2013-03-19 15:00"), 26407],
[Date.parse("2013-03-19 16:00"), 93973],
[Date.parse("2013-03-19 17:00"), 77760],
[Date.parse("2013-03-19 18:00"), 68715],
[Date.parse("2013-03-19 19:00"), 20383],
]
}
],
plotOptions
);
});
</script>
</head>

<body>
<div id="overview-plot24"></div>
</body>
</html>

这在 Chrome 和 Opera 中正确呈现,但该系列无法在 Safari 和 Firefox 中呈现。 Correct rendering Chrome 渲染正确。 Bad rendering Safari 和 Firefox 无法正确呈现它。

这很令人费解,因为 flot 网页上的示例在所有浏览器上都能正确呈现,而且我正在努力查看我的代码在哪里不同!

对于那些有兴趣直接运行代码的人,包含所有你需要的 zip 存档是 available .

最佳答案

问题不在 Flot 或其渲染中,而是在JavaScript 中,特别是在您用于日期的格式中。

您为日期使用的格式无效(请参阅呈现图表中的水平轴),因为该格式 2013-03-19 19:00 可被 IE 和 Chrome 识别,但不能被 FF 识别 Safari 。

您确定每个浏览器都会读取的唯一格式是 YYYY-MM-DDTHH:mm:ss.sssZ 所以在您的情况下,您应该将代码中的字符串更改为 2013- 03-19T19:00。看看thisthis在 SO 上发布其他详细信息(或 this little tutorial 关于日期)。

关于javascript - Flot 无法在某些浏览器上呈现图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15524119/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com