1

タイプのc3js折れ線グラフがありtimeseriesます。

私の軸テーブルは現在次のようになっています:

x 軸の表示 11/10.....05/11.....11/11.....05/12.....11/12.....05/13.....11/13

そしてそれはそうであってほしい

.12/10.....06/11.....12/11.....06/12.....12/12.....06/13.....

ここで、各ドットは月を示します。11/10 のデータポイントは引き続き保持および表示され、軸のラベルのみが変更されていることに注意してください。参考までに、インクリメントは直接設定されていませんが、 を使用してハッキングされていcullingます。

開始ラベルを変更する方法はありますか12/10(後続のすべてのラベルは 6 か月間隔で増加します)?

更新 (2014 年 11 月 14 日): 作業用のjsFiddleを追加しました。どんな助けでも大歓迎です！ 更新 (14NOV14):関数を使用してみました。しかし、「ポップアップ」ボックスに常に灰色の見出しを表示したいのです。

4

1 に答える 1

7

これは、非常に文書化されていないライブラリにとって、非常に長い学習プロセスでした。しかし、目盛りのフォーマット オプションに関数を使用してから、ツールヒントのタイトルを再度フォーマットする必要がありました。これが最終的な作業コピーです。

HTML ( d3.js、c3.js、およびc3.cssスクリプトも含めます)

<body>
    <div id="chartContainer"></div>
</body>

JS

var chart = c3.generate({
  bindto: '#chartContainer',
    data: {
        x: 'x',
        columns: [
            ['x', '2013-04-01', '2013-05-02', '2013-06-03', '2013-07-04', '2013-08-05', '2013-09-06'],
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 340, 200, 500, 250, 350]
        ]
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: function (x) {
                    if((x.getMonth()+1) % 6 === 0) {
                        return ('0' + (x.getMonth()+1)).slice(-2) + '/' + x.getFullYear().toString().substr(2,2);
                    }
                }
            }
        }
    },
    tooltip: {
        format: {
            title: function (d) {
                var format = d3.time.format('%m/%y');
                return format(d)
            }
        }
    }
});

NB またculling、これに干渉する可能性があることに注意してください。culling: {max: 100}組み込みのインクリメントが適用されないように設定する必要がありました。

于 2014-11-14T03:07:43.333 に答える