jQuery Flot.js x 轴上的日期错误
jQuery Flot.js wrong dates in x axis
我有一个愚蠢的问题..我已经阅读了以下内容，其中涉及使用 flot.js 在 plot 图表的底部创建日期。但是我的问题仍然存在。:
how-to-plot-a-date-range-on-x-axis-in-flot-charts
Understanding Date and Time in JavaScript
我还有问题。
这是我的 Javascript:
var chart_plot_11_data = [
[1199167200000, 0],[1201845600000, 0],[1204351200000, 0],[1207026000000, 0],[1209618000000, 0],[1212296400000, 0],[1214888400000, 0],[1217566800000, 0],[1220245200000, 0],[1222837200000, 0],[1225515600000, 59.95],[1228111200000, 719.4],[1230789600000, 0],[1233468000000, 119.9],[1235887200000, 59.95],[1238562000000, 59.95],[1241154000000, 59.95],[1243832400000, 0],[1246424400000, 0],[1249102800000, 0],[1251781200000, 0],[1254373200000, 239.8],[1257051600000, 59.95],[1259647200000, 59.95],[1262325600000, 119.9],[1265004000000, 0],[1267423200000, 0],[1270098000000, 359.7],[1272690000000, 0],[1275368400000, 0],[1277960400000, 0],[1280638800000, 119.9],[1283317200000, 0],[1285909200000, 59.95],[1288587600000, 59.95],[1291183200000, 119.9],[1293861600000, 119.9],[1296540000000, 119.9],[1298959200000, 119.9],[1301634000000, 59.95],[1304226000000, 0],[1306904400000, 59.95],[1309496400000, 0],[1312174800000, 0],[1314853200000, 0],[1317445200000, 0],[1320123600000, 59.95],[1322719200000, 0],[1325397600000, 119.9],[1328076000000, 0],[1330581600000, 119.9],[1333256400000, 59.95],[1335848400000, 59.95],[1338526800000, 59.95],[1341118800000, 0],[1343797200000, 0],[1346475600000, 119.9],[1349067600000, 119.9],[1351746000000, 0],[1354341600000, 59.95],[1357020000000, 59.95],[1359698400000, 119.9],[1362117600000, 119.9],[1364792400000, 119.9],[1367384400000, 0],[1370062800000, 0],[1372654800000, 0],[1375333200000, 0],[1378011600000, 59.95],[1380603600000, 59.95],[1383282000000, 0],[1385877600000, 0],[1388556000000, 0],[1391234400000, 0],[1393653600000, 59.95],[1396328400000, 59.95],[1398920400000, 0],[1401598800000, 359.7],[1404190800000, 1678.6],[1406869200000, 959.2],[1409547600000, 1798.5],[1412139600000, 239.8],[1414818000000, 59.95],[1417413600000, 239.8],[1420092000000, 179.85],[1422770400000, 299.75],[1425189600000, 539.55],[1427864400000, 119.9],[1430456400000, 419.65],[1433134800000, 119.9],[1435726800000, 179.85],[1438405200000, 299.75],[1441083600000, 359.7],[1443675600000, 479.6],[1446354000000, 59.95],[1448949600000, 239.8],[1451628000000, 419.65],[1454306400000, 419.65],[1456812000000, 959.2],[1459486800000, 539.55],[1462078800000, 959.2],[1464757200000, 419.65],[1467349200000, 239.8],[1470027600000, 299.75],[1472706000000, 419.65],[1475298000000, 479.6],[1477976400000, 539.55],[1480572000000, 419.65],[1483250400000, 1139.05],[1485928800000, 1258.95],[1488348000000, 2098.25],[1491022800000, 1139.05],[1493614800000, 599.5],[1496293200000, 779.35],[1498885200000, 899.25],[1501563600000, 899.25],[1504242000000, 359.7],[1506834000000, 299.75],[1509512400000, 299.75],[1512108000000, 359.7],[1514786400000, 479.6],[1517464800000, 899.25],[1519884000000, 1798.5],[1522558800000, 359.7],[1525150800000, 0],[1527829200000, 0],[1530421200000, 0],[1533099600000, 0],[1535778000000, 0],[1538370000000, 0],[1541048400000, 0],[1543644000000, 0],
];
var chart_plot_11_settings = {
series: {
curvedLines: {
apply: true,
active: true,
monotonicFit: true
}
},
colors: ["#26B99A"],
grid: {
borderWidth: {
top: 0,
right: 0,
bottom: 1,
left: 1
},
borderColor: {
bottom: "#7F8790",
left: "#7F8790"
}
},
xaxis: {
mode: "time",
timeformat: "%b %m"
}
};
if ($("#chart_plot_11").length) {
$.plot($("#chart_plot_11"), [{
label: "Revenue",
data: chart_plot_11_data,
lines: {
fillColor: "rgba(150, 202, 89, 0.12)"
},
points: {
fillColor: "#fff"
}
}], chart_plot_11_settings);
}
现在我特别有问题的部分是：
[1199167200000, 0],[1201845600000, 0],[1204351200000, ...
根据我的阅读，Unix 时间戳需要乘以 1000，因为 Unix 以秒为单位，而 JS 以毫秒为单位。所以在我 return 的 php 中，这就是我获取时间戳的方式：
$mysql_time = "$year-$month-01"; // Year IE(2017) - Month IE(05) - First day of month (01)
$info_by_month['timestamp'] = strtotime($mysql_time) * 1000;
基本上是将mysql时间戳转换为Unix时间戳，然后乘以1000得到JS时间戳。
这是它 return 的内容：
问题是，它们都显示 Jan 01 -- 我的问题是 php 还是 JS？我如何 return 正确 timestamp?
将 JS 中的时间格式更改为类似 timeformat: "%b %m<br>%Y" 的内容，您可以看到年份。请记住，x 轴上的日期属于刻度线和网格线，而不属于数据点。查看结果的代码片段。
var chart_plot_11_data = [
[1199167200000, 0],
[1201845600000, 0],
[1204351200000, 0],
[1207026000000, 0],
[1209618000000, 0],
[1212296400000, 0],
[1214888400000, 0],
[1217566800000, 0],
[1220245200000, 0],
[1222837200000, 0],
[1225515600000, 59.95],
[1228111200000, 719.4],
[1230789600000, 0],
[1233468000000, 119.9],
[1235887200000, 59.95],
[1238562000000, 59.95],
[1241154000000, 59.95],
[1243832400000, 0],
[1246424400000, 0],
[1249102800000, 0],
[1251781200000, 0],
[1254373200000, 239.8],
[1257051600000, 59.95],
[1259647200000, 59.95],
[1262325600000, 119.9],
[1265004000000, 0],
[1267423200000, 0],
[1270098000000, 359.7],
[1272690000000, 0],
[1275368400000, 0],
[1277960400000, 0],
[1280638800000, 119.9],
[1283317200000, 0],
[1285909200000, 59.95],
[1288587600000, 59.95],
[1291183200000, 119.9],
[1293861600000, 119.9],
[1296540000000, 119.9],
[1298959200000, 119.9],
[1301634000000, 59.95],
[1304226000000, 0],
[1306904400000, 59.95],
[1309496400000, 0],
[1312174800000, 0],
[1314853200000, 0],
[1317445200000, 0],
[1320123600000, 59.95],
[1322719200000, 0],
[1325397600000, 119.9],
[1328076000000, 0],
[1330581600000, 119.9],
[1333256400000, 59.95],
[1335848400000, 59.95],
[1338526800000, 59.95],
[1341118800000, 0],
[1343797200000, 0],
[1346475600000, 119.9],
[1349067600000, 119.9],
[1351746000000, 0],
[1354341600000, 59.95],
[1357020000000, 59.95],
[1359698400000, 119.9],
[1362117600000, 119.9],
[1364792400000, 119.9],
[1367384400000, 0],
[1370062800000, 0],
[1372654800000, 0],
[1375333200000, 0],
[1378011600000, 59.95],
[1380603600000, 59.95],
[1383282000000, 0],
[1385877600000, 0],
[1388556000000, 0],
[1391234400000, 0],
[1393653600000, 59.95],
[1396328400000, 59.95],
[1398920400000, 0],
[1401598800000, 359.7],
[1404190800000, 1678.6],
[1406869200000, 959.2],
[1409547600000, 1798.5],
[1412139600000, 239.8],
[1414818000000, 59.95],
[1417413600000, 239.8],
[1420092000000, 179.85],
[1422770400000, 299.75],
[1425189600000, 539.55],
[1427864400000, 119.9],
[1430456400000, 419.65],
[1433134800000, 119.9],
[1435726800000, 179.85],
[1438405200000, 299.75],
[1441083600000, 359.7],
[1443675600000, 479.6],
[1446354000000, 59.95],
[1448949600000, 239.8],
[1451628000000, 419.65],
[1454306400000, 419.65],
[1456812000000, 959.2],
[1459486800000, 539.55],
[1462078800000, 959.2],
[1464757200000, 419.65],
[1467349200000, 239.8],
[1470027600000, 299.75],
[1472706000000, 419.65],
[1475298000000, 479.6],
[1477976400000, 539.55],
[1480572000000, 419.65],
[1483250400000, 1139.05],
[1485928800000, 1258.95],
[1488348000000, 2098.25],
[1491022800000, 1139.05],
[1493614800000, 599.5],
[1496293200000, 779.35],
[1498885200000, 899.25],
[1501563600000, 899.25],
[1504242000000, 359.7],
[1506834000000, 299.75],
[1509512400000, 299.75],
[1512108000000, 359.7],
[1514786400000, 479.6],
[1517464800000, 899.25],
[1519884000000, 1798.5],
[1522558800000, 359.7],
[1525150800000, 0],
[1527829200000, 0],
[1530421200000, 0],
[1533099600000, 0],
[1535778000000, 0],
[1538370000000, 0],
[1541048400000, 0],
[1543644000000, 0],
];
var chart_plot_11_settings = {
series: {
curvedLines: {
apply: true,
active: true,
monotonicFit: true
}
},
colors: ["#26B99A"],
grid: {
borderWidth: {
top: 0,
right: 0,
bottom: 1,
left: 1
},
borderColor: {
bottom: "#7F8790",
left: "#7F8790"
}
},
xaxis: {
mode: "time",
timeformat: "%b %m<br>%Y"
}
};
if ($("#chart_plot_11").length) {
$.plot($("#chart_plot_11"), [{
label: "Revenue",
data: chart_plot_11_data,
lines: {
fillColor: "rgba(150, 202, 89, 0.12)"
},
points: {
fillColor: "#fff"
}
}], chart_plot_11_settings);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<div id="chart_plot_11" style="height: 320px;"></div>
我有一个愚蠢的问题..我已经阅读了以下内容，其中涉及使用 flot.js 在 plot 图表的底部创建日期。但是我的问题仍然存在。:
how-to-plot-a-date-range-on-x-axis-in-flot-charts
Understanding Date and Time in JavaScript
我还有问题。
这是我的 Javascript:
var chart_plot_11_data = [
[1199167200000, 0],[1201845600000, 0],[1204351200000, 0],[1207026000000, 0],[1209618000000, 0],[1212296400000, 0],[1214888400000, 0],[1217566800000, 0],[1220245200000, 0],[1222837200000, 0],[1225515600000, 59.95],[1228111200000, 719.4],[1230789600000, 0],[1233468000000, 119.9],[1235887200000, 59.95],[1238562000000, 59.95],[1241154000000, 59.95],[1243832400000, 0],[1246424400000, 0],[1249102800000, 0],[1251781200000, 0],[1254373200000, 239.8],[1257051600000, 59.95],[1259647200000, 59.95],[1262325600000, 119.9],[1265004000000, 0],[1267423200000, 0],[1270098000000, 359.7],[1272690000000, 0],[1275368400000, 0],[1277960400000, 0],[1280638800000, 119.9],[1283317200000, 0],[1285909200000, 59.95],[1288587600000, 59.95],[1291183200000, 119.9],[1293861600000, 119.9],[1296540000000, 119.9],[1298959200000, 119.9],[1301634000000, 59.95],[1304226000000, 0],[1306904400000, 59.95],[1309496400000, 0],[1312174800000, 0],[1314853200000, 0],[1317445200000, 0],[1320123600000, 59.95],[1322719200000, 0],[1325397600000, 119.9],[1328076000000, 0],[1330581600000, 119.9],[1333256400000, 59.95],[1335848400000, 59.95],[1338526800000, 59.95],[1341118800000, 0],[1343797200000, 0],[1346475600000, 119.9],[1349067600000, 119.9],[1351746000000, 0],[1354341600000, 59.95],[1357020000000, 59.95],[1359698400000, 119.9],[1362117600000, 119.9],[1364792400000, 119.9],[1367384400000, 0],[1370062800000, 0],[1372654800000, 0],[1375333200000, 0],[1378011600000, 59.95],[1380603600000, 59.95],[1383282000000, 0],[1385877600000, 0],[1388556000000, 0],[1391234400000, 0],[1393653600000, 59.95],[1396328400000, 59.95],[1398920400000, 0],[1401598800000, 359.7],[1404190800000, 1678.6],[1406869200000, 959.2],[1409547600000, 1798.5],[1412139600000, 239.8],[1414818000000, 59.95],[1417413600000, 239.8],[1420092000000, 179.85],[1422770400000, 299.75],[1425189600000, 539.55],[1427864400000, 119.9],[1430456400000, 419.65],[1433134800000, 119.9],[1435726800000, 179.85],[1438405200000, 299.75],[1441083600000, 359.7],[1443675600000, 479.6],[1446354000000, 59.95],[1448949600000, 239.8],[1451628000000, 419.65],[1454306400000, 419.65],[1456812000000, 959.2],[1459486800000, 539.55],[1462078800000, 959.2],[1464757200000, 419.65],[1467349200000, 239.8],[1470027600000, 299.75],[1472706000000, 419.65],[1475298000000, 479.6],[1477976400000, 539.55],[1480572000000, 419.65],[1483250400000, 1139.05],[1485928800000, 1258.95],[1488348000000, 2098.25],[1491022800000, 1139.05],[1493614800000, 599.5],[1496293200000, 779.35],[1498885200000, 899.25],[1501563600000, 899.25],[1504242000000, 359.7],[1506834000000, 299.75],[1509512400000, 299.75],[1512108000000, 359.7],[1514786400000, 479.6],[1517464800000, 899.25],[1519884000000, 1798.5],[1522558800000, 359.7],[1525150800000, 0],[1527829200000, 0],[1530421200000, 0],[1533099600000, 0],[1535778000000, 0],[1538370000000, 0],[1541048400000, 0],[1543644000000, 0],
];
var chart_plot_11_settings = {
series: {
curvedLines: {
apply: true,
active: true,
monotonicFit: true
}
},
colors: ["#26B99A"],
grid: {
borderWidth: {
top: 0,
right: 0,
bottom: 1,
left: 1
},
borderColor: {
bottom: "#7F8790",
left: "#7F8790"
}
},
xaxis: {
mode: "time",
timeformat: "%b %m"
}
};
if ($("#chart_plot_11").length) {
$.plot($("#chart_plot_11"), [{
label: "Revenue",
data: chart_plot_11_data,
lines: {
fillColor: "rgba(150, 202, 89, 0.12)"
},
points: {
fillColor: "#fff"
}
}], chart_plot_11_settings);
}
现在我特别有问题的部分是：
[1199167200000, 0],[1201845600000, 0],[1204351200000, ...
根据我的阅读，Unix 时间戳需要乘以 1000，因为 Unix 以秒为单位，而 JS 以毫秒为单位。所以在我 return 的 php 中，这就是我获取时间戳的方式：
$mysql_time = "$year-$month-01"; // Year IE(2017) - Month IE(05) - First day of month (01)
$info_by_month['timestamp'] = strtotime($mysql_time) * 1000;
基本上是将mysql时间戳转换为Unix时间戳，然后乘以1000得到JS时间戳。
这是它 return 的内容：
问题是，它们都显示 Jan 01 -- 我的问题是 php 还是 JS？我如何 return 正确 timestamp?
将 JS 中的时间格式更改为类似 timeformat: "%b %m<br>%Y" 的内容，您可以看到年份。请记住，x 轴上的日期属于刻度线和网格线，而不属于数据点。查看结果的代码片段。
var chart_plot_11_data = [
[1199167200000, 0],
[1201845600000, 0],
[1204351200000, 0],
[1207026000000, 0],
[1209618000000, 0],
[1212296400000, 0],
[1214888400000, 0],
[1217566800000, 0],
[1220245200000, 0],
[1222837200000, 0],
[1225515600000, 59.95],
[1228111200000, 719.4],
[1230789600000, 0],
[1233468000000, 119.9],
[1235887200000, 59.95],
[1238562000000, 59.95],
[1241154000000, 59.95],
[1243832400000, 0],
[1246424400000, 0],
[1249102800000, 0],
[1251781200000, 0],
[1254373200000, 239.8],
[1257051600000, 59.95],
[1259647200000, 59.95],
[1262325600000, 119.9],
[1265004000000, 0],
[1267423200000, 0],
[1270098000000, 359.7],
[1272690000000, 0],
[1275368400000, 0],
[1277960400000, 0],
[1280638800000, 119.9],
[1283317200000, 0],
[1285909200000, 59.95],
[1288587600000, 59.95],
[1291183200000, 119.9],
[1293861600000, 119.9],
[1296540000000, 119.9],
[1298959200000, 119.9],
[1301634000000, 59.95],
[1304226000000, 0],
[1306904400000, 59.95],
[1309496400000, 0],
[1312174800000, 0],
[1314853200000, 0],
[1317445200000, 0],
[1320123600000, 59.95],
[1322719200000, 0],
[1325397600000, 119.9],
[1328076000000, 0],
[1330581600000, 119.9],
[1333256400000, 59.95],
[1335848400000, 59.95],
[1338526800000, 59.95],
[1341118800000, 0],
[1343797200000, 0],
[1346475600000, 119.9],
[1349067600000, 119.9],
[1351746000000, 0],
[1354341600000, 59.95],
[1357020000000, 59.95],
[1359698400000, 119.9],
[1362117600000, 119.9],
[1364792400000, 119.9],
[1367384400000, 0],
[1370062800000, 0],
[1372654800000, 0],
[1375333200000, 0],
[1378011600000, 59.95],
[1380603600000, 59.95],
[1383282000000, 0],
[1385877600000, 0],
[1388556000000, 0],
[1391234400000, 0],
[1393653600000, 59.95],
[1396328400000, 59.95],
[1398920400000, 0],
[1401598800000, 359.7],
[1404190800000, 1678.6],
[1406869200000, 959.2],
[1409547600000, 1798.5],
[1412139600000, 239.8],
[1414818000000, 59.95],
[1417413600000, 239.8],
[1420092000000, 179.85],
[1422770400000, 299.75],
[1425189600000, 539.55],
[1427864400000, 119.9],
[1430456400000, 419.65],
[1433134800000, 119.9],
[1435726800000, 179.85],
[1438405200000, 299.75],
[1441083600000, 359.7],
[1443675600000, 479.6],
[1446354000000, 59.95],
[1448949600000, 239.8],
[1451628000000, 419.65],
[1454306400000, 419.65],
[1456812000000, 959.2],
[1459486800000, 539.55],
[1462078800000, 959.2],
[1464757200000, 419.65],
[1467349200000, 239.8],
[1470027600000, 299.75],
[1472706000000, 419.65],
[1475298000000, 479.6],
[1477976400000, 539.55],
[1480572000000, 419.65],
[1483250400000, 1139.05],
[1485928800000, 1258.95],
[1488348000000, 2098.25],
[1491022800000, 1139.05],
[1493614800000, 599.5],
[1496293200000, 779.35],
[1498885200000, 899.25],
[1501563600000, 899.25],
[1504242000000, 359.7],
[1506834000000, 299.75],
[1509512400000, 299.75],
[1512108000000, 359.7],
[1514786400000, 479.6],
[1517464800000, 899.25],
[1519884000000, 1798.5],
[1522558800000, 359.7],
[1525150800000, 0],
[1527829200000, 0],
[1530421200000, 0],
[1533099600000, 0],
[1535778000000, 0],
[1538370000000, 0],
[1541048400000, 0],
[1543644000000, 0],
];
var chart_plot_11_settings = {
series: {
curvedLines: {
apply: true,
active: true,
monotonicFit: true
}
},
colors: ["#26B99A"],
grid: {
borderWidth: {
top: 0,
right: 0,
bottom: 1,
left: 1
},
borderColor: {
bottom: "#7F8790",
left: "#7F8790"
}
},
xaxis: {
mode: "time",
timeformat: "%b %m<br>%Y"
}
};
if ($("#chart_plot_11").length) {
$.plot($("#chart_plot_11"), [{
label: "Revenue",
data: chart_plot_11_data,
lines: {
fillColor: "rgba(150, 202, 89, 0.12)"
},
points: {
fillColor: "#fff"
}
}], chart_plot_11_settings);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<div id="chart_plot_11" style="height: 320px;"></div>