Jquery flot插件无法根据日期绘制图表

Question

Jquery flot插件无法根据日期绘制图表

5

我正在尝试使用jquery flot插件和JSON数据绘制图表。我需要做的是：

页面加载时，它将发起ajax调用并从服务器接收json数据。
从接收到的json中，我需要添加'x'和'y'轴标签。我想根据json数据中的点绘制图表
'Y'轴必须具有0到100的值
'X'轴应仅具有json数据值

我的脚本如下：

    //var maxDate = new Date();
    //var minDate = new Date();
    var options = {
        series: {
            lines: {
                show: true
            },
            points: {
                show: true
            }
        },
        grid: {
            hoverable: true,
            clickable: true
        },
        xaxis: { //min: minDate.setMonth(maxDate.getMonth() - 12),
                //max: maxDate,
                mode: "time",
                monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                timeformat: "%b(%Y)" 
        },
        yaxis: {
            min: 0,
            max: 100,
            ticks: 10
        }
    var data = [];
    var placeholder = $("#trigo");

        var dataurl = 'cprogress.php?action=overall';

        // then fetch the data with jQuery
        function onDataReceived(series) {
            data.push(series);
            $.plot(placeholder, data, options);
            setData(data);
         }

        $.ajax({
            url: dataurl,
            method: 'GET',
            dataType: 'json',
            success: onDataReceived
        });

现在我的图表看起来像这样：在此输入图片描述

JSON 数据为：

[["2013-11-05",8.3333333333333],["2013-12-05",0]]

我想打印的是2013年11月和2013年12月，并从8.33到0绘制图形。现在它打印的是1970年1月，我不知道为什么。

请有人帮我解决这个问题。我已经努力解决了两天。谢谢...

- James

你写的JSON实际上是你的cprogress.php?overall页面正在打印的内容，还是你想要的内容？这个问题可能看起来很愚蠢，但我只是想问一下你的PHP是否正确。 - Kevin Cittadini

@ Kevin Cittadini 我有jquery.flot.time.js。这就是为什么我的图表只显示了1970年1月。同时，您所说的“文档报告模式：null”是什么意思？ - James

@ Kevin Cittadini 我的 php 是正确的。结果会根据不同情况而改变。这就是我想要用 json 获取结果的原因。 - James

没什么，我只是引用了文档中的一行。是的，后来我弄明白了。无论如何，请看这个时间序列数据。日期必须是Javascript时间戳，但你返回的日期格式是yyyy-mm-dd。Javascript时间戳是Unix时间戳乘以1000（页面上也是这样说的）。 - Kevin Cittadini

@Kevin Cittadini 谢谢您的建议。现在它运行良好。 - James

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Travis J · Accepted Answer

jsFiddle演示

这里有几件事情需要注意。首先，flot期望的日期将是自1970年以来的毫秒数。当传递一个字符串时，它只会将其评估为基本上是-1000、0和1000，用于您的字符串输入。结果是三个日期，都基本上在1970年1月。

因此，您需要一个小助手函数来为您操作这些日期输入。

function formatTime(input){
 for( var i = 0; i < input.length; i++ ){
  var date = input[i][0];
  input[i][0] = new Date(date).getTime();
 }
 return input;
}

你可以使用你的ajax调用返回的系列结果来调用此函数。

function onDataReceived(series) {
 series = formatTime(series);//called here
 data.push(series);
 $.plot(placeholder, data, options);
 //setData(data);not shown in question
}

那么这将解决“时间”问题。然而，我注意到还有另一个障碍。一旦你做到了这一点，图表的格式将显示两个标签紧挨在一起。这是因为（如果注释掉自定义部分可以观察到）flot希望按天显示范围。因此，在一天范围结束时更改月份（即11月和12月都显示的位置）是显示两个标签的位置。为了克服这个问题，我建议使用类似以下方式：

autoscaleMargin: 1,

针对您的x轴自定义。此演示还包括一个小的单击示例(主要是为了验证数据点的准确性)。

example

参考文献：