javascript - 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]
            }
        }
    }
});