web-dev-qa-db-ja.com

C3.js-時間のある時系列の解析に失敗する

C3.js形式の日付と2015-09-17 18:20:34形式の日付を使用して、'%Y-%m-%d %H:%M:%S'の時系列グラフを表示したいのですが、解析に失敗します。

私のコード：

var chart = c3.generate({
    bindto: '#chart',
    data: {
      x: 'times',
      columns: [
        ['times','2015-09-17 18:20:34','2015-09-17 18:25:42','2015-09-17 18:30:48'],
        ['data','1539','1546','1546','1550']
      ]
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d %H:%M:%S'
            }
        }
    }
});

そして、次のエラーが発生します。

02:26:44.889 Failed to parse x '2015-09-17 18:20:34' to Date object c3.min.js:1:21943
02:26:44.889 Failed to parse x '2015-09-17 18:25:42' to Date object c3.min.js:1:21943
02:26:44.890 Failed to parse x '2015-09-17 18:30:48' to Date object c3.min.js:1:21943
02:26:44.890 Failed to parse x '2015-09-17 18:20:34' to Date object c3.min.js:1:21943
02:26:44.891 Failed to parse x '2015-09-17 18:25:42' to Date object c3.min.js:1:21943
02:26:44.892 Failed to parse x '2015-09-17 18:30:48' to Date object c3.min.js:1:21943

データとフォーマットで時間を省略しても機能しますが、時間も必要です。

javascriptparsingtime-seriesc3.js
13
das Keks

私は自分の問題の解決策を見つけました：

axisオブジェクトの形式は、日付の表示方法を定義するためのものです。日付解析の形式を指定する場合は、xFormatオブジェクトでdataを使用する必要があります。

var chart = c3.generate({
    bindto: '#chart',
    data: {
      x: 'times',
      xFormat: '%Y-%m-%d %H:%M:%S', // how the date is parsed
      columns: [
        ['times','2015-09-17 18:20:34','2015-09-17 18:25:42','2015-09-17 18:30:48'],
        ['data','1539','1546','1546','1550']
      ]
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d %H:%M:%S' // how the date is displayed
            }
        }
    }
});
30
das Keks

C3時系列配列に日付を渡す別の方法もあります。 c3にフィードする前に、日付文字列を Javascript Dateオブジェクト に変換できます。

var chart = c3.generate({
    bindto: '#chart',
    data: {
      x: 'times',
      xFormat: '%Y-%m-%d %H:%M:%S', // how the date is parsed
      columns: [
        ['times',new Date('2015-09-17 18:20:34'),new Date('2015-09-17 18:25:42'),new Date('2015-09-17 18:30:48')],
        ['data','1539','1546','1546','1550']
      ]
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d %H:%M:%S' // how the date is displayed
            }
        }
    }
});

日付文字列を日付オブジェクトに変換するのが難しい場合（例：2016-01-01T00：00：00Z）、 momentjs を使用して日付文字列を解析することもできます。

var momentjsobject = moment('2016-05-06T00:00:00Z');
var dateObject = new Date(momentjsobject.format('YYYY-MM-DD HH:mm:ss'));
3
Cemal