Линейный график C3.js - вопросы с метками оси

Question

У меня проблемы с C3.js.

1. На оси «X» последняя дата не полностью виден (см. Прилагаемый скриншот).
2. На оси «Y» я хочу отображать только целые числа, а не десятичные числа.

Как решить эти проблемы?

Answer 1

Вы можете попробовать добавить точку подделки (нуль) в конце данных, а затем не показать, что точка, чтобы дать себе больше места на оси х.

Для оси 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)'); 

Answer 3

Первая неприятность вызвана поздней даты находится вне диапазона SVG. Таким образом, вы можете указать зону заполнения svg справа, добавив

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