绘制图表,显示甚至不是JSON的数据中的数据

时间:2014-01-01 10:12:27

标签: javascript flot

我有以下

<div id="chart"></div>

<script src="js/flot/jquery.flot.js"></script>
<script src="js/flot/jquery.flot.tooltip.min.js"></script>
<script src="js/flot/jquery.flot.resize.js"></script>

var sessions = [
[1418706000000, 14813],
[1418792400000, 39580],
[1418878800000, 51193],
[1418965200000, 66700],
[1419051600000, 108737],
[1419138000000, 101081],
[1419224400000, 94449],
[1419310800000, 109039],
[1419397200000, 92329],
[1419483600000, 68942],
[1419570000000, 75391],
[1419656400000, 120016],
[1419742800000, 132495],
[1419829200000, 103469],
[1419915600000, 88940],
[1420002000000, 59938],
[1420088400000, 72359],
[1420174800000, 74663]
];

var users = [
[1418706000000, 2632],
[1418792400000, 9588],
[1418878800000, 9273],
[1418965200000, 10839],
[1419051600000, 14948],
[1419138000000, 11226],
[1419224400000, 13394],
[1419310800000, 10493],
[1419397200000, 8482],
[1419483600000, 2375],
[1419570000000, 5783],
[1419656400000, 10068],
[1419742800000, 8288],
[1419829200000, 5423],
[1419915600000, 4866],
[1420002000000, 1862],
[1420088400000, 5560],
[1420174800000, 1257]
];

function doPlot(position) {
    $.plot($("#chart"), [{
        data: sessions,
        label: "Sessions"
    }, {
        data: revenue,
        label: "Revenue",
        yaxis: 2
    }], {
        xaxes: [{
            mode: 'time'
        }],
        yaxes: [{
            min: 0
        }, {
            alignTicksWithAxis: position == "right" ? 1 : null,
            position: position
        }],
        legend: {
            position: 'sw'
        },
        grid: {
            hoverable: true 
        },
        tooltip: true,
        tooltipOpts: {
           content: "%s for %x was %y",
           xDateFormat: "%y-%0m-%0d",
           onHover: function (flotItem, $tooltipEl) {

           }
        }
     });
  }

  doPlot("right");

这显示会话和用户的日期数据,甚至没有数据。有数据的最后日期是12月27日。然而,此折线图显示截至1月2日的数据。

以下是一个工作示例here

有什么想法吗?

2 个答案:

答案 0 :(得分:1)

根据你在每个数组元素中的最后一个数据条目的时间= 1420174800000,所以:

var date = new Date(1420174800000);

// output "Fri, 02 Jan 2015 05:00:00 GMT"
console.log(date.toGMTString());

答案 1 :(得分:1)

我将您的数据转换为日期:

date = new Date(sessions[i][0])

包含 2014年12月16日 2015年1月2日之间的日期。您可以在this fiddle中看到它 填充数组时,您应该使用以下命令将日期转换为数字:

sessions[i] = [Number(date), value];

我不确定你的意思是Date('D, M j'),我认为它是一个像"Date(month,day,year)"这样的字符串。将json的kinf转换为可绘制数据的示例:in this other fiddle

实际上,我改变了日期和月份,但你明白了。 :)