使用 C3.js 为 Timeseries X 轴创建堆积条形图答案

【问题标题】：Create Stacked Bar chart for Timeseries X axis using C3.js使用 C3.js 为 Timeseries X 轴创建堆积条形图
【发布时间】：2019-04-16 17:45:22
【问题描述】：

我正在尝试创建这个堆叠条形图（使用 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'
        }
    }
}

【问题讨论】：

标签： javascript angularjs web d3.js c3.js

【解决方案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>

【讨论】：