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（）来保存你的日期

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

小提琴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中显示来自DB的日期

2 个答案: