C3/D3条形图，水平滚动 [英] C3 / D3 bar chart with horizontal scroll

问题描述

我正在创建一个c3条形图，其中每个条形表示在给定的一周内加入该计划的人数.数据只是具有[{week，#people}，{week，#people}等的对象的数组.

理想情况下，我希望图表中显示最近的6周，但我希望能够水平滚动以查看过去的几周.

我看到了一个答案( D3.js滚动条形图)，但是在这种情况下，滚动时轴不会保持可见-我想这样做.

任何帮助将不胜感激.

解决方案

c3.js可让您制作子图表"，该子图表本质上类似于在Google财经上看到的股票图表./p>

我怀疑您最好让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;
            }
        }
    }
});

I'm working on creating a c3 bar chart where each bar represents the # of people who joined a program in the given week. Data is just an array of objects with [{week, # of people}, {week, # of people}, etc.]

Ideally, I want the latest 6 weeks to show in the chart, but I want to be able to scroll horizontally to see past weeks.

I saw one answer to this (D3.js scrolling bar chart), but in this case, the axis did not stay visible when scrolling - which I would like to do.

Any help would be much appreciated.

解决方案

c3.js allows you to make a "Sub Chart", which in essence is similar to a stock chart such as those you would see on Google Finance.

I suspect you would be better off letting the Sub Chart be your mechanism for scrolling than trying to implement a scrollbar from css.

One of the nice features of the c3 Sub Chart is how it allows to set the 'default extent' for the Sub Chart. What you could do is use the extent to default to a limited number of weeks, and from there, the user can manipulate the Sub Chart slider/brush as they see fit. Here is a simple implementation/dummy example:

axis.x.extent
http://c3js.org/reference.html

...Set default extent for subchart and zoom.

c3 Sub Chart
http://c3js.org/samples/options_subchart.html

working example in 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>

JavaScript for c3 chart

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

这篇关于C3/D3条形图，水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！