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

Question

我在使用 C3.js 时遇到了一些问题。

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

我该如何解决这些问题？

Answer 1

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

对于 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

加载图形后，您还可以使用 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
    }
}

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

C3.js line chart - issues with axis labels

javascript

jquery

c3.js