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

Add timestamp format to line graph x-axes

本文关键字：折线图 添加 时间戳 格式      更新时间：2023-09-26

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

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

为了让它发挥作用，我必须做几件事。

首先也是最重要的一点，不要将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
            }
        }
    }
});

很抱歉没有早点说清楚！

相关文章：