C3.js折線圖 - 軸標籤問題

Question

我在C3.js上遇到了一些問題。

1. 在「X」軸上，最後一個日期不完全可見（請參閱附圖）。
2. 在「Y」軸上，我只想顯示整數而不是小數。

我該如何解決這些問題？

Answer 1

你可以嘗試在數據的末尾添加一個假的（零）點，然後沒有表現出這一點，給自己在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

一旦圖形被加載

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

Answer 3

第一個麻煩是由日期較晚所造成超出SVG範圍您還可以使用jQuery解決這個問題。所以你可以通過添加

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] 
     ] 
    }, 
    padding: { 
     right: 22 
    } 
}