代码之家 › 专栏 › 技术社区 › fabiofcferreira

使用C3为Timeseries X轴创建堆叠条形图。js公司

c3.js d3.js web angularjs javascript

fabiofcferreira · 技术社区 · 7 年前

我正在尝试创建这个堆积条形图(使用C3.js),就像图中的一样,这是一个timeseries的堆积条形图。

我当前的配置是: `

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

1 回复 | 直到 7 年前

Vanquished Wombat 7 年前

您需要处理数据布局,并朝着使用组的方向前进。如下所示。

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>

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

4 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

4 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

4 年前

jieunbi · 按日期排序数组(最新优先)

4 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

4 年前

Stradosphere · 如何防止ng bind html添加结束标记?

8 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

8 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

8 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

8 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

8 年前