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

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

我跟在后面。但无法获得动态范围

代码如下

更新1

var date1=新日期（1397657484*1000）；
var date2=新日期（1397657514*1000）；
var date3=新日期（1397657554*1000）；
var date4=新日期（1397657594*1000）；
var date5=新日期（1397657641*1000）；
var date6=新日期（1398323901*1000）；
var seconds=（date6.getTime（）-date1.getTime（））/1000；
var-xaxis格式；
如果（秒<86400）
{
XaxiFormat='%I:%M:%S'；
}
否则{
XaxiFormat='%Y-%m-%d%I:%m'；
}
var format=d3.time.format（xaxisformat）//我在if循环之后进行转换，因为我们使用javascript计算秒数。
date1=格式（date1）//我认为将d3.time传递给c3js需要这种格式
date2=格式（date2）；
date3=格式（date3）；
date4=格式（date4）；
date5=格式（date5）；
date6=格式（date6）；
var图表=c3.0({
数据：{
x：‘x’，
栏目：[
['x'，日期1，日期2，日期3，日期4，日期5，日期6]，
[data1'，30200100400150250]，
[data2'，130340200500250350]
]
},
轴线：{
x:{
键入：“timeseries”，
勾选：{
格式：xaxisformat
}
}
}
});

---

这可能是一个愚蠢的问题，但我对这一领域是新手。

为了让这项工作正常进行，我必须做几件事

首先也是最重要的一点，不要将d3重新声明为日期，因为您将无法使用任何d3库！我将

d1、d2、d3…

重命名为

date1、date2、date3…

其次，c3.js似乎只允许时间格式说明符的子集，

%X

不是其中之一，因此我更改了：

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

到

注意，我还将

parseDate

重命名为

format

，因为它更好地反映了正在发生的事情。但是你不需要使用这个，请看下面我的更新

获取动态x轴时间格式的一种方法是计算最后一个日期和第一个日期之间的差值——在这种情况下，如果时间跨度大于一天（86400秒），则改变格式

更新

实际上，这里根本不需要使用

format=d3.time.format（…）

，因为c3.js处理所有的日期格式。因此，您可以这样做（直接在c3'x'列中传递日期，而不是格式化日期，因为它将被重新格式化）：

var date1=新日期（1397657484*1000）；
...
var date5=新日期（1397657641*1000）；
var date6=新日期（1397657741*1000）；
var seconds=（date6.getTime（）-date1.getTime（））/1000；
var-xaxis格式；
如果（秒<86400）
{
XaxiFormat='%I:%M:%S'；
}
否则{
XaxiFormat='%Y-%m-%d%I:%m'
}
var图表=c3.0({
数据：{
x：‘x’，
栏目：[
['x'，日期1，日期2，日期3，日期4，日期5，日期6]，
[data1'，30200100400150250]，
[data2'，130340200500250350]
]
},
轴线：{
x:{
键入：“timeseries”，
勾选：{
格式：xaxisformat
}
}
}
});

---

很抱歉没有早点说清楚

关于编辑（c3->d3），实际上有一个c3库，它使用d3创建帮助重用图表。所以这个问题是正确的。这对我来说也是新闻，但这里有记录：应用了相同的代码。首先以秒为单位获取时间，然后格式化为d3.time格式，然后使用if循环确定xaxisformat。但没有结果。显示NaN.Good point，我犯了一个错误（实际上根本不需要在这里使用format=d3.time.format（…），我已经更新了答案以澄清

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

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

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
    }

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