将时间戳格式添加到折线图x轴

Question

我是d3.js的新手,也是c3.js.的新手.我想要c3.js中的动态时间戳,如本d3.js示例所示.它应该根据时间范围改变时间格式.

我正在关注c3js.org的时间序列示例.但无法获得动态范围.

代码如下.

更新1

var date1=new Date(1397657484*1000);
var date2=new Date(1397657514*1000);
var date3=new Date(1397657554*1000);
var date4=new Date(1397657594*1000);
var date5=new Date(1397657641*1000);
var date6=new Date(1398323901*1000);

var seconds = (date6.getTime() - date1.getTime())/1000;

var xaxisformat;
    if (seconds < 86400)
    {
        xaxisformat = '%I:%M:%S';
    }
    else {
        xaxisformat = '%Y-%m-%d %I:%M';
    }

var format=d3.time.format(xaxisformat);  //I am converting after if loop since we are calculating seconds using javascript.

date1=format(date1); //I think this formatting required to pass d3.time to c3js
date2=format(date2);
date3=format(date3);
date4=format(date4);
date5=format(date5);
date6=format(date6);

var chart = c3.generate({
data: {
    x: 'x',
    columns: [
        ['x',date1, date2, date3, date4, date5, date6],
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 130, 340, 200, 500, 250, 350]
    ]
},
axis: {
    x: {
        type: 'timeseries',
        tick: {
            format: xaxisformat
        }
    }
}
});

这可能是一个愚蠢的问题,但我是这个领域的新手.

Answer 1

为了让这个工作,我必须做几件事.

首先,最重要的是,不要重新声明d3为日期,因为您将无法使用任何d3库!我改名d1, d2, d3...为date1, date2, date3...

其次,看起来c3.js只允许时间格式说明符的子集而%X不是其中之一,所以我改变了:

var parseDate = d3.time.format("%X");

至

var format = d3.time.format("%Y-%m-%d %I:%M:%S.%L");

请注意,我也重命名为parseDate,format因为它更好地反映了正在发生的事情.但是无论如何你都不需要使用它,请参阅下面的更新

获得动态x轴时间格式的一种方法是计算最后和第一个日期之间的差异 - 在这种情况下,如果时间跨度大于一天(86400秒),则改变格式

var seconds = (date6.getTime() - date1.getTime())/1000;

var xaxisformat;
if (seconds < 86400)
{
    xaxisformat = '%I:%M:%S';
}
else {
    xaxisformat = '%Y-%m-%d %I:%M'
}

并将tick格式更改为:

x: {
    type: 'timeseries',
    tick: {
        format: xaxisformat
    }

更新

实际上你根本不需要format=d3.time.format(...)在这里使用,因为c3.js处理所有的日期格式.所以你可以这样做(直接在c3'x'列中传递日期而不是格式化它,因为它将被重新格式化):

var date1=new Date(1397657484*1000);
...
var date5=new Date(1397657641*1000);
var date6=new Date(1397657741*1000);

var seconds = (date6.getTime() - date1.getTime())/1000;
var xaxisformat;
if (seconds < 86400)
{
    xaxisformat = '%I:%M:%S';
}
else {
    xaxisformat = '%Y-%m-%d %I:%M'
}

var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x',date1, date2, date3, date4, date5, date6],
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 340, 200, 500, 250, 350]
        ]
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
              format: xaxisformat
            }
        }
    }
});

很抱歉没有提前说清楚!