javascript - C3.js 折れ線グラフ - 軸ラベルの問題

Question

で困っていC3.jsます。

1. 「X」軸では、最後の日付は完全には表示されません (添付のスクリーンショットを参照)。
2. 「Y」軸には、小数ではなく整数のみを表示したいと考えています。

これらの問題を解決するにはどうすればよいですか?

Answer 1

データの最後に偽の (null) ポイントを追加して、そのポイントを表示しないようにして、x 軸のスペースを増やすことができます。

y 軸については、意図的に y 軸の値を設定できます。

例を次に示します: http://jsfiddle.net/bfcnzm1z/

var chart = c3.generate({

    data: {
        x: 'x',
        columns: [
            ['x', '2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01', '2016-01-01'],
            ['sample', 1.2, 2.3, 0.5, 0.8, 1.5, 2, null]
        ]
    },
    axis: {
        x: {padding: {right:200},
            type: 'timeseries',
            tick: {
                format: function (x) {
                    return x.getFullYear();
                },
                outer: false,
                values: ['2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01']
            }
        },
        y: {
            tick: {
                format: d3.format('d'),
                outer: false,
                values: [0,1,2]
            }
        }
    }
});

Answer 2

グラフがロードされたら、jquery でこれを修正することもできます

var $chartContainer = $('.c3');
var $lastTick = $chartContainer.find('.c3-axis.c3-axis-x .tick').last();
var translateValue = parseInt($lastTick.attr('transform').replace('translate(', ''),10);
var tickWidth = $lastTick[0].getBoundingClientRect().width / 2;

$lastTick.attr('transform', 'translate(' + (translateValue - tickWidth) + ',0)');