【问题标题】:jQuery Flot.js wrong dates in x axisjQuery Flot.js x 轴上的错误日期
【发布时间】:2018-09-19 05:38:57
【问题描述】:

我遇到了一个愚蠢的问题 .. 我已阅读以下内容,这些内容涉及使用 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 以毫秒为单位。所以在我返回的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时间戳。

这是它返回的内容:

问题是,它们都显示 1 月 1 日 -- 我的问题是在 php 还是 JS?如何返回正确的timestamp

【问题讨论】:

    标签: javascript php plot timestamp flot


    【解决方案1】:

    将JS中的时间格式改成timeformat: "%b %m<br>%Y"之类的,就可以看到年份了。请记住,x 轴上的日期属于刻度线和网格线,而不是数据点。结果见代码sn-p。

    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>

    【讨论】:

    • 是的,我的语法没有任何问题..它只是显示每年的 1 月 1 日......很好!
    猜你喜欢
    • 1970-01-01
    • 2013-07-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多