dimplejs timeseries没有用timeaxis绘图

时间:2014-05-08 10:48:24

标签: javascript jquery d3.js data-visualization dimple.js

我有这个jsfiddle:http://jsfiddle.net/Ra2xS/42/。我完全不知道出了什么问题。任何人都可以看看代码并建议更正吗?

var dim = {"width":590,"height":450}; //chart container width
var data = [{"date":"2008-07-16T07:00:00.000000000+0000","units":0},{"date":"2008-07-16T08:00:00.000000000+0000","units":0.97},{"date":"2008-07-16T09:00:00.000000000+0000","units":0.96},{"date":"2008-07-16T10:00:00.000000000+0000","units":1.66},{"date":"2008-07-16T11:00:00.000000000+0000","units":1.56},{"date":"2008-07-16T12:00:00.000000000+0000","units":1.53},{"date":"2008-07-16T13:00:00.000000000+0000","units":1.99},{"date":"2008-07-16T14:00:00.000000000+0000","units":2.22},{"date":"2008-07-16T15:00:00.000000000+0000","units":1.20},{"date":"2008-07-16T16:00:00.000000000+0000","units":0.10}];

function barplot(id,dim,data)
{
    keys = Object.keys(data[0]);
    var xcord = keys[0];
    var ycord = keys[1];
    var svg = dimple.newSvg(id, dim.width, dim.height);

    var myChart = new dimple.chart(svg,data);
    myChart.setBounds(60, 30, 505, 305);        
    var x = myChart.addTimeAxis("x", xcord, "%Y-%m-%dT%H:%M:%S.%LZ","%Y-%m-%dT%H:%M:%S.%LZ");

    x.addOrderRule(xcord);
    x.showGridlines = true;
    x.timePeriod = d3.time.hours;

    var y = myChart.addMeasureAxis("y", ycord);
    y.showGridlines = true;
    y.tickFormat = ',.2f';    

    var s1 = myChart.addSeries(null, dimple.plot.line);
    s1.lineWeight = 3;
    s1.lineMarkers = true;

    myChart.draw(1500);    
}

barplot("body",dim,data);

1 个答案:

答案 0 :(得分:2)

日期的输入格式错误。它应该是:

%Y-%m-%dT%H:%M:%S.%L000000+0000

http://jsfiddle.net/Ra2xS/43/