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