Question

我试图绘制一个图表，其中c3.js库在间隔时间内具有x轴。

我们根据日期范围选择器制定这些间隔因此，如果我们选择日期2016-03-13 00:00到2016-03-13 04:00，那么我们将15分钟添加到开始日期，直到它仍然存在小于或等于结束日期

我所采取的数据点如下：

[＆＃34; x＆＃34;，＆＃34; 2016-03-13 00：00＆＃34;，＆＃34; 2016-03-13 00:15＆＃34;，＆＃34; 2016-03- 13 00:30＆＃34;，＆＃34; 2016-03-13 00:45＆＃34;，＆＃34; 2016-03-13 01：00＆＃34;，＆＃34; 2016-03-13 01 ：15＆＃34;，＆＃34; 2016-03-13 01:30＆＃34;，＆＃34; 2016-03-13 01:45＆＃34;，＆＃34; 2016-03-13 02:00＆＃34;，＆＃34; 2016-03-13 02：15＆＃34;，＆＃34; 2016-03-13 02：30＆＃34;，＆＃34; 2016-03-13 02：45＆＃34 ;，＆＃34; 2016-03-13 03：00＆＃34;，＆＃34; 2016-03-13 03:15＆＃34;，＆＃34; 2016-03-13 03：30＆＃34;，＆＃34; 2016-03-13 03：45＆＃34;，＆＃34; 2016-03-13 04：00＆＃34;]

当时区没有发生DST时，这些点工作正常。但是当DST适用时，图表中缺少凌晨2点到凌晨3点之间的点，因为这个刻度是23小时。无论DST在何处适用，我们都需要在图表中绘制所有点。我们正在使用以下代码，但它不起作用

var chart = c3.generate({
    data: {
        x: 'x',
         xFormat: '%Y-%m-%d %H:%M', // 'xFormat' can be used as custom format of 'x'
        columns: [
            ["x", "2016-03-13 00:00", "2016-03-13 00:15", "2016-03-13 00:30", "2016-03-13 00:45", "2016-03-13 01:00", "2016-03-13 01:15", "2016-03-13 01:30", "2016-03-13 01:45", "2016-03-13 02:00", "2016-03-13 02:15", "2016-03-13 02:30", "2016-03-13 02:45", "2016-03-13 03:00", "2016-03-13 03:15", "2016-03-13 03:30", "2016-03-13 03:45", "2016-03-13 04:00"],//            ['x', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
            ['data1', 30, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250.30, 200, 100, 400, 150]
        ]
    },
    axis: {
        x: {
            type: 'timeseries',

             fit: true,
            tick: {
                format: '%Y-%m-%d %H:%M:%S'
            }
        }
    }
});

Answer 1

有几个设置在本地和utc时间之间切换，一个用于数据，一个用于轴，尽管数据尚未正式曝光，必须通过c3内部完成属性

c3.chart.internal.fn.additionalConfig.data_xLocaltime = false;

var chart = c3.generate({
    data: {
        x: 'x',
         xFormat: '%Y-%m-%d %H:%M', // 'xFormat' can be used as custom format of 'x'
        columns: [
            ["x", "2016-03-13 00:00", "2016-03-13 00:15", "2016-03-13 00:30", "2016-03-13 00:45", "2016-03-13 01:00", "2016-03-13 01:15", "2016-03-13 01:30", "2016-03-13 01:45", "2016-03-13 02:00", "2016-03-13 02:15", "2016-03-13 02:30", "2016-03-13 02:45", "2016-03-13 03:00", "2016-03-13 03:15", "2016-03-13 03:30", "2016-03-13 03:45", "2016-03-13 04:00"],
            /*["x", "2016-03-27 00:00", "2016-03-27 00:15", "2016-03-27 00:30", "2016-03-27 00:45", "2016-03-27 01:00", "2016-03-27 01:15", "2016-03-27 01:30", "2016-03-27 01:45", "2016-03-27 02:00", "2016-03-27 02:15", "2016-03-27 02:30", "2016-03-27 02:45", "2016-03-27 03:00", "2016-03-27 03:15", "2016-03-27 03:30", "2016-03-27 03:45", "2016-03-27 04:00"],*/
            ['data1', 30, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250.30, 200, 100, 400, 150]
        ]
    },
    axis: {
        x: {
            type: 'timeseries',

             fit: true,
            tick: {
                format: '%Y-%m-%d %H:%M:%S'
            },
            localtime: false,
        }
    }
});

（2016-03-27数据我曾经在英国的语言环境中测试，因为这里发生了白昼时间的变化）

Answer 2

尝试使用带有时区偏移的日期字符串。

var dateFormatter=d3.time.format("%Y-%m-%d %H:%M%Z");
columns[0].forEach(function(d,idx,theArray){
    if(d!='x'){
        theArray[idx] = dateFormatter(new Date(d));
    }
});

当存在处于DST时间的间隔数据时，x轴未在c3.js中正确绘图

2 个答案: