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

时间:2017-07-28 11:05:02

标签: javascript d3.js charts c3.js

我想在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'
            }
        }
    }
});

但它给了我错误:

  

无法将x'2017-07-28,2017-07-29'解析为Date对象

     

错误:属性转换:预期数字,“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'
            }
        }
    }
});

1 个答案:

答案 0 :(得分: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'
             }
        }
    }
});