我正致力于创建一个c3条形图,其中每个条形图代表在给定周内加入某个程序的人数。数据只是一组对象,其中包含[{week,#of people},{week,#of people}等等。]
理想情况下,我希望在图表中显示最近的6周,但我希望能够横向滚动以查看过去几周。
我看到了一个答案(D3.js scrolling bar chart),但在这种情况下,滚动时轴不会保持可见 - 我想这样做。
非常感谢任何帮助。
答案 0 :(得分:7)
c3.js允许您制作一个"子图表",其实质上类似于您在Google财经上看到的股票图表。
我怀疑你最好让Sub Chart成为你滚动的机制,而不是尝试从css实现滚动条。
c3子图表的一个不错的功能是如何设置'默认范围'对于子图表。你可以做的是使用范围默认为有限的几周,然后用户可以根据需要操作子图表滑块/画笔。这是一个简单的实现/虚拟示例:
<强> axis.x.extent 强>
http://c3js.org/reference.html
...设置子图和缩放的默认范围。
c3子图表
http://c3js.org/samples/options_subchart.html
jsfiddle中的工作示例
http://jsfiddle.net/y6tns4mt/1/
<强> HTML 强>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>My Chart Title</p>
<div>
<div id="my-chart"></div>
</div>
</div>
</div>
</div>
c3图表的JavaScript
var chart = c3.generate({
bindto: '#my-chart',
data: {
columns: [
['people', 30, 200, 100, 400, 150, 250, 40, 50, 70, 80, 90, 100, 17, 47, 51, 141]
],
type: 'bar'
},
subchart: {
show: true
},
axis: {
x: {
extent: [13, 16]
}
},
tooltip: {
format: {
title: function (d) {
return 'Week ' + d;
}
}
}
});