Как использовать временные ряды в графике c3.js? - PullRequest
Новая
       35

Как использовать временные ряды в графике c3.js?

0 голосов
/ 21 мая 2018

Мне нужно нарисовать линейный график на основе временных рядов. Я использую c3.js для построения своего графика. Я следовал по этой ссылке , чтобы выполнить мое требование. 

  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.Как получить соответствующий результат для моего требования. Спасибо.

Это моя проблема: This is my issue on chart

1 Ответ

0 голосов
/ 22 мая 2018

Ну, ваши данные в порядке.Но вы упустили возможность определить формат времени.Возможно, вам понадобится добавить свойство 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'.На самом деле это то, что вы пропустили.Вот рабочая скрипка .

Надеюсь, это поможет !!

...