[英]Create Stacked Bar chart for Timeseries X axis using C3.js
我正在尝试创建此堆叠条形图(使用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'
}
}
}
`
您将需要进行数据布局并走向使用组。 与下面类似。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.