如何在 c3.js 图表中使用时间序列？答案

【问题标题】：How to use time series in c3.js chart?如何在 c3.js 图表中使用时间序列？
【发布时间】：2018-10-31 04:59:28
【问题描述】：

我需要根据时间序列绘制折线图。我正在使用 c3.js 绘制我的图表。我按照this link 来实现我的要求。

  var chart = c3.generate({
        data: {
            x: 'x',
            xFormat: '%Y',
            columns: [
                ['x', '2010', '2011', '2012', '2013', '2014', '2015','2016'],
                ['data1', 30, 200, 100, 400, 150, 250, 400],
                ['data2', 830, 1200, 1100, 1400, 1150, 1250, 1500],
            ],
            axes: {
                data2: 'y2'
            },

        },

        axis: {
            x: {

                    type: 'timeseries',
                    tick: {
                        format: '%Y'
                    }
            },
            y2: {
                show: true
            }
        },
   });

这段代码运行良好。

但我在使用时间序列时遇到问题，我的图表无法正确显示。

我如何达到我的要求。我需要使用时间序列和数据时间秒来绘制批量数据。

我的要求是：

['x', '2013-01-01 12:00:00', '2013-01-02 12:00:05', '2013-01-03 12:00:10', '2013-01-04 12:00:15', '2013-01-05 12:00:20', '2013-01-10 12:00:25', '2013-01-15 12:00:30', '2013-02-15 12:00:35'],
                ['data1', 30, 200, 100, 400, 150, 250, 400],
                ['data2', 830, 1200, 1100, 1400, 1150, 1250, 1500],

       axis: {
            x: {

                    type: 'timeseries',
                    tick: {
                        format: '%Y-%m-%dT%H:%M:%S',
                    }

            },
            y2: {
                show: true
            }
        },

X 轴值显示为 NaN。如何获得适合我要求的结果。谢谢。

这是我的问题：

【问题讨论】：

标签： javascript d3.js time-series linechart c3.js

【解决方案1】：

嗯，你的数据很好。但是您错过了定义时间格式的选项。您可能需要在数据对象中添加 xFormat 属性并提供正确的格式。

 var chart = c3.generate({
        data: {
            x: 'x',
            xFormat: '%Y-%m-%d %H:%M:%S',
            columns: [
                ['x', '2013-01-01 12:00:00', '2013-01-02 12:00:05', '2013-01-03 12:00:10', '2013-01-04 12:00:15', '2013-01-05 12:00:20', '2013-01-10 12:00:25', '2013-01-15 12:00:30', '2013-02-15 12:00:35'],
                ['data1', 30, 200, 100, 400, 150, 250, 400, 200],
                ['data2', 830, 1200, 1100, 1400, 1150, 1250, 1500, 300],
            ],
            axes: {
                data2: 'y2'
            },

        },

        axis: {
            x: {

                    type: 'timeseries',
                    tick: {
                        format: '%Y-%m-%d %H:%M:%S',
                        rotate: -90
                    }
            },
            y2: {
                show: true
            }
        },
   });

注意xFormat: '%Y-%m-%d %H:%M:%S' 选项。其实这就是你错过的。这是一个有效的fiddle。

希望对你有帮助！！

【讨论】：

@NimeshkaSrimal 你能使用时间序列和来自 csv 的数据吗？我有很多数据，所以我从 csv (url: 'data.csv') 获取它，但我也想使用间隔为 12 小时的时间序列，总间隔为 5 天。我尝试了很多东西，但它不起作用。似乎我要么必须使用来自同一脚本（而不是 csv）的数据才能使用时间序列。请帮忙