Question

我有一个csv格式的数据文件。我需要使用第二列作为x轴。该列采用hh：mm：ss格式。我可以做12小时的格式吗？我试过了：

<SCRIPT>
var chart = c3.generate({
            bindto: '#chart',
    data: {

    x: 'time12',
    xFormat:  '%H:%M:%S',
    url: 'dataXY_11-21-2016.csv',
    type: 'line'
    },
 });

axis: {
        y: {
            max: 350,
            min: 0,
            // Range includes padding, set 0 if no padding needed
            // padding: {top:0, bottom:0}
        }
    }
});
</SCRIPT>

Answer 1

您没有将x轴定义为时间序列。您的配置应如下所示（仅用于演示的列）：

var chart = c3.generate({
    bindto: '#chart',
    data: {
        x: 'time12',
        xFormat: '%H:%M:%S',
        columns: [
            ['data', 90,250,180,320,100],
            ['time12', '12:31:25', '13:12:54','14:27:21', '14:53:42', '15:51:47']
            ],
        type: 'line'

    },
    axis: {
        x: {
            type:'timeseries',
            tick:{
                format: '%H:%M:%S'
            }
        },
        y: {
            max: 350,
            min: 0
      }
    }

});

您只需调整xFormat即可。如果您有“08:12:23 PM”，请改用“%H:%M:%S %p”。有关详细信息，您可以访问c3文档或查看d3中的formatting options。

如何在C3.js中使用csv时间列作为x轴？

1 个答案: