使用C3.js为时间序列X轴创建堆积条形图

Question

我正在尝试使用此图片中的on来创建此堆积的条形图（使用C3.js），它是时间序列的堆积的条形图。

我当前的配置是： `

{
    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>