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

Question

我是 d3.js 和 c3.js 的新手。我想要 c3.js 中的动态时间戳，如this d3.js example 所示。它应该根据时间范围改变时间格式。

我关注c3js.org's time series example。但无法获得动态范围。

代码如下。

更新 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'
}

并将刻度格式更改为：

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
            }
        }
    }
});

抱歉没有早点说清楚！