在时间序列图表中使用数组作为数据源 C3.js

Question

我想像这样在 C3.js 图表中使用数组作为源：

var xData = ['2017-07-28', '2017-07-29'];
var yData = [30, 200];

var chart = c3.generate({
    bindto: '#chart',
    data: {
        x: 'x',
        xFormat: '%Y-%m-%d',
        columns: [
            ['x', xData],
            ['data1', yData]
        ]
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d'
            }
        }
    }
});

但它给我这样的错误：

Failed to parse x '2017-07-28,2017-07-29' to Date object

Error: attribute transform: Expected number, "translate(NaN, 0)".

如果我使用直接值，那么它会完美地工作：

var chart = c3.generate({
    bindto: '#chart',
    data: {
        x: 'x',
        xFormat: '%Y-%m-%d',
        columns: [
            ['x', '2017-07-28', '2017-07-29'],
            ['data1', 30, 200]
        ]
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d'
            }
        }
    }
});

Answer 1

在你的情况下，

['x', xData]

等于

['x', ['2017-07-28', '2017-07-29']]

不是

['x', '2017-07-28', '2017-07-29']

您可以做的是在之前创建数组：

var xData = ['2017-07-28', '2017-07-29'];
var yData = [30, 200];

xData.unshift('x');
yData.unshift('data1');

var chart = c3.generate({
     bindto: '#chart',
     data: {
         x: 'x',
         xFormat: '%Y-%m-%d',
         columns: [
             xData,
             yData
        ]
    },
    axis: {
        x: {
             type: 'timeseries',
             tick: {
                 format: '%Y-%m-%d'
             }
        }
    }
});

在时间序列图表中使用数组作为数据源 C3.js

Use arrays as data sources in timeseries chart C3.js

javascript

charts

d3.js

c3.js