4

各バーが特定の週にプログラムに参加した人数を表す c3 棒グラフの作成に取り組んでいます。データは、[{week, # of people}, {week, # of people} など] を含むオブジェクトの単なる配列です。

理想的には、最新の 6 週間をチャートに表示したいのですが、水平方向にスクロールして過去の週を表示できるようにしたいと考えています。

これに対する1つの答え（D3.js scrolling bar chart）を見ましたが、この場合、スクロール時に軸が表示されたままになりませんでした。

どんな助けでも大歓迎です。

4

1 に答える 1

7

c3.js を使用すると、「サブ チャート」を作成できます。これは本質的に、Google Finance で表示されるような株価チャートに似ています。

css からスクロールバーを実装しようとするよりも、サブチャートをスクロールのメカニズムにする方がよいと思います。

c3 サブ チャートの優れた機能の 1 つは、サブ チャートの「デフォルト範囲」を設定できることです。あなたができることは、限定された週数にデフォルト設定する範囲を使用することです。そこから、ユーザーはサブチャートのスライダー/ブラシを適切に操作できます。簡単な実装/ダミーの例を次に示します。

ここに画像の説明を入力

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;
            }
        }
    }
});
于 2014-12-12T04:04:24.253 に答える