Question

我在使用C3.js时遇到了一些麻烦。

在“X”轴上，最后一个日期不完全可见（参见随附的屏幕截图）。
在“Y”轴上，我只想显示整数而不是小数。

如何解决这些问题？

enter image description here

Answer 1

您可以尝试在数据末尾添加一个假（空）点，然后不显示该点，以便在x轴上给自己留出更多空间。

对于y轴，您可以故意设置y轴值。

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

第一个问题是由于迟到的日期超出了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
    }
}

Answer 3

加载图表后，您还可以使用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)');

C3.js折线图 - 轴标签问题

3 个答案: