在 jQuery flot 中显示来自数据库的日期

Question

我有一些来自 Db 的数据，我想在图表中显示这些数据。这是数据示例 - 日期和一些数字

[[2016-03-10, 4], [2016-03-11, 3], [2016-03-12, 6]]

JS中的数据取自twig变量

 var searchFlot = '{{ flotSearch|raw }}';
 var barOptions = {
     series: {
         lines: {
             show: true,
             lineWidth: 2,
             fill: true,
             fillColor: {
                 colors: [{
                     opacity: 0.0
                 }, {
                     opacity: 0.0
                 }]
             }
         }
     },
     xaxis: {
         mode: "time",
         timeformat: "%Y-%m-%d",
         minTickSize: [1, "day"]
     },
     colors: ["#1ab394"],
     grid: {
         color: "#999999",
         hoverable: true,
         clickable: true,
         tickColor: "#D4D4D4",
         borderWidth:0
     },
     legend: {
         show: false
     },
     tooltip: true,
     tooltipOpts: {
         content: "x: %x, y: %y"
     }
 };
 $('document').ready(function() {
     $.plot($("#flot-search"), [{label: "Searches", data: searchFlot}], barOptions);
 });

它显示了图形网格，但图形上没有绘制数据。 X 轴仅显示 1970-01-01 标签。

Answer 1

您需要使用时间戳格式

var searchFlot = [[moment("2016-03-10"), 4], [moment("2016-03-11"), 3], [moment("2016-03-12"), 6]];

我使用 moment() 来保留你的日期

我添加了一些我的代码，因为我最近做了一个非常相似的项目，希望它能有所帮助。

Fiddle here

Answer 2

供您参考，

这里是 flot.js 文档 flot google API.txt

根据这份文件，

您会发现 Flot 中的时间序列支持基于 Javascript 个时间戳。

一个 Javascript 时间戳是自 1970 年 1 月 1 日以来的毫秒数 00:00:00 UTC。

所以，你可以试试这个：

new Date("2016-03-10").getTime();

希望对您有所帮助！

在 jQuery flot 中显示来自数据库的日期

Show date from DB in jQuery flot

jquery

flot