带水平滚动的C3 / D3条形图

时间:2014-12-10 07:00:33

标签: d3.js scroll c3.js

我正致力于创建一个c3条形图,其中每个条形图代表在给定周内加入某个程序的人数。数据只是一组对象,其中包含[{week,#of people},{week,#of people}等等。]

理想情况下,我希望在图表中显示最近的6周,但我希望能够横向滚动以查看过去几周。

我看到了一个答案(D3.js scrolling bar chart),但在这种情况下,滚动时轴不会保持可见 - 我想这样做。

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:7)

c3.js允许您制作一个"子图表",其实质上类似于您在Google财经上看到的股票图表。

我怀疑你最好让Sub Chart成为你滚动的机制,而不是尝试从css实现滚动条。

c3子图表的一个不错的功能是如何设置'默认范围'对于子图表。你可以做的是使用范围默认为有限的几周,然后用户可以根据需要操作子图表滑块/画笔。这是一个简单的实现/虚拟示例:

enter image description here

<强> 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;
            }
        }
    }
});