Jquery flot插件没有根据日期绘制图形

Question

我正在尝试使用带有JSON数据的jquery flot插件绘制图形.我需要做的是.

• 当页面加载时,它将进行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]]

我要打印的是 11月(​​2013年)和12月(2013年),必须从8.33到0绘制图表现在打印1月(1970年)为什么我不知道.

请任何人帮我解决这个问题.我两天都在努力解决这个问题.谢谢...

Answer 1

jsFiddle Demo

这里发生了一些事情。首先，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 轴定制。该演示还包括一个小的点击示例（主要是为了验证数据点是否准确）。

检查的参考文献：

• https://github.com/flot/flot/blob/master/API.md
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime
• https://raw.github.com/mde/timezone-js/master/src/date.js
• http://flot.googlecode.com/svn/trunk/API.txt