使用C3.js為時間序列X軸創建堆積條形圖

Question

我正在嘗試創建此堆疊條形圖（使用C3.js），如圖中的on，這是時間序列的堆疊條形圖。

我當前的配置是：

{
    data: {
        json: [
            {
                "calendar_date": "2018-11-01",
                "segment_description": "Executive Suite",
                "before_otb": 2,
            },
            {
                "calendar_date": "2018-11-01",
                "segment_description": "Handicapped Room",
                "before_otb": 3,
            },
            {
                "calendar_date": "2018-11-01",
                "segment_description": "Junior Suite",
                "before_otb": 5,
            }
        ],
        type: 'bar',
        keys: {
            x: 'calendar_date',
            value: ['before_otb']
        },
    },
    axis: {
        x: {
            type: 'timeseries'
        }
    }
}

`

Answer 1

您將需要進行數據布局並走向使用組。 與下面類似。

 var chart = c3.generate({ data: { x: "x-axis", json:[ { "x-axis": "0", "data1": 30, "data2": 40, "data3": 20, "data4": 10, "data5": 50, "data6": 40 }, { "x-axis": "1", "data1" :20, "data2": 60, "data3": 10, "data4": 15, "data5": 40, "data6": 20, }], // etc etc keys: { x: "x-axis", value: ["data1", "data2", "data3", "data4", "data5", "data6"] }, groups: [ ["data1", "data2", "data3", "data4", "data5", "data6"] ], type: 'bar' } }); 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.8/c3.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.8/c3.min.js"></script> <div id="chart"></div>