c3 js -> 我需要移动/更改我的 x 轴标签

Question

（我专门使用 c3.js，但它是一个 d3.js 库，所以我添加了两个标签）

我正在尝试制作一个图表，根据用户点击的月份显示 'month' 的数据。我遇到的问题是 x 轴标签显示 0-X 而不是 1-X。

因此，例如二月显示 0 - 27 而不是 1-28。

此图的代码如下所示：

var chart = c3.generate({
    bindto: '#graph',
    data: {
        columns: [
            daysArray
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 1
        }
    }
});

非常简单...'daysArray' 是数据（没有数据的日子为 0）它包含一个标签 ('Expenses') 和 28 个值。

我尝试添加这段代码：

var chart = c3.generate({
    bindto: '#graph',
    data: {
        columns: [
            daysArray
        ],
        type: 'bar'
    },
    /*==========ADDED THIS SECTION=========*/
    axis: {
        x:{
            tick: {
                values: monthLengthArray,
            }
        }
    },
    /*======================================*/
    bar: {
        width: {
            ratio: 1
        }
    }
});

其中使用 'monthLengthArray' 输入每个月的天数。 IE。如果用户单击 Feb. 它包含值 1 - 28... Jan. 包含 1-31... 等等，它看起来像这样：

基本相同，但有一个空白的 0 列。澄清一下，对于这两次尝试，数据都在正确的 'days' 上，但 'shifted' 在右边..

我确定这是一个简单的修复，但是这个问题的措辞非常困难（我在发帖前没能在这里找到答案，但我确实看过了）

还有一点要注意：我没有使用 'timeseries' 作为 x 轴。我正在使用默认值（我认为是 'indexed'）。我确定索引与它有关，但我不确定如何告诉它从 1 而不是 0 开始索引！

谢谢！

Answer 1

如果问题只是将标签的值向上移动一位，请在您的设置中尝试此段：

axis: { 
   x: {
        tick: {
            format: function (x) { return x+1; }
        }
    }
}

c3 js -> 我需要移动/更改我的 x 轴标签

c3 js -> I need to shift/ change my x-axis labels

html

javascript

d3.js

c3.js