Question

我用c3.js制作了一个条形图，我需要在图表中添加非连续的日子

问题是该图表添加了空白日

我使用此代码，可以在页面中复制和粘贴代码并查看实时结果

var chart = c3.generate({
    data: {
        x: 'x',
        type: 'bar',
        columns: [
            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-07', '2013-01-09', '2013-01-10', '2013-01-11'],
            ['data1', 30, 200, 100, 400, 150, 250, 250, 250, 250],
            ['data2', 130, 340, 200, 500, 250, 350, 250, 250, 250]
        ]
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d'
            }
        }
    }
});

Answer 1

您可以使用类别轴而不是时间序列轴。检查示例：

Ext.onReady(function() {

var myData = [
                {'apiName':'List', 'action':'GET','count':'23'}, 
                {'apiName':'Test', 'action':'GET','count':'24'}
            ];

    var store = new Ext.data.JsonStore({
        fields: [
            { name: 'apiName', type: 'string' },
            { name: 'action', type: 'string' },
            { name: 'count', type: 'string' }
        ]
    });

    store.loadData(myData);

    var grid = new Ext.grid.GridPanel({
        store: store,
        loadMask: true,
        columns: [
            { header: 'apiName', dataIndex: 'apiName' },
            { header: 'action', dataIndex: 'action' },
            { header: 'count', dataIndex: 'count' }
        ],
        viewConfig: {
            forceFit: true
        }
    });

    var myWin = new Ext.Window({
        layout: 'fit',
        title: 'API Usage',
        width: 400,
        height: 300,
        closable: true,
        buttonAlign: 'center',
        items: [grid],
        modal: true
    });
    myWin.show();});


**I created a fiddle using your store values in a popup. Go through this link for details code.**

c3.js删除非连续日的时间序列之间的空格

1 个答案: