D3.js 带水平滚动的C3/D3条形图
我正在制作一个c3条形图,其中每个条形图代表在给定的一周内参加某个计划的人数。数据只是一个对象数组,包含[{week,{people},{week,{people}等] 理想情况下,我希望在图表中显示最近的6周,但我希望能够水平滚动查看过去的几周 我看到了这个()的一个答案,但在本例中,轴在滚动时不可见——我希望这样做D3.js 带水平滚动的C3/D3条形图,d3.js,scroll,c3.js,D3.js,Scroll,C3.js,我正在制作一个c3条形图,其中每个条形图代表在给定的一周内参加某个计划的人数。数据只是一个对象数组,包含[{week,{people},{week,{people}等] 理想情况下,我希望在图表中显示最近的6周,但我希望能够水平滚动查看过去的几周 我看到了这个()的一个答案,但在本例中,轴在滚动时不可见——我希望这样做 任何帮助都将不胜感激。c3.js允许您制作一个“子图表”,本质上类似于您在谷歌金融上看到的股票图表 我想你最好让子图表作为你的滚动机制,而不是试图从css实现一个滚动条 c3子图
任何帮助都将不胜感激。c3.js允许您制作一个“子图表”,本质上类似于您在谷歌金融上看到的股票图表 我想你最好让子图表作为你的滚动机制,而不是试图从css实现一个滚动条 c3子图表的一个很好的特性是它如何允许为子图表设置“默认范围”。您可以做的是将范围默认为有限的周数,然后用户可以根据自己的需要操纵子图表滑块/画笔。下面是一个简单的实现/虚拟示例: x轴范围
…设置子图表和缩放的默认范围 c3子图表
JSFIDLE中的工作示例
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>
谢谢你的回答-这可能是我最终要实现的。我只是想知道是否有一种方法可以让y轴根据视图中的条形图与整个数据集进行调整。
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;
}
}
}
});