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

很抱歉没有早点说清楚！

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

1 个答案: