如何防止缩放标签在chartjs中被切断？

Question

我遇到chartjs问题，其中缩放标签以下列方式被“切断”：

[1]

是否可以设置保证金？我在chartjs文档中没有看到任何关于此的内容，这些似乎包含在chartjs canvas元素中（意思是：没有被另一个div覆盖）。

Answer 1

在value之前添加带有空格的比例标签选项。允许使用2个或更多个空格。

scaleLabel: "<%= ' ' + value%>"

Answer 2

您还可以在布局配置中设置填充（至少在chart.js 2中）：

options: {
    layout: {
        padding: {
            left: 10
        }
    }
}

http://www.chartjs.org/docs/latest/configuration/layout.html

Answer 3

这是我的骇客-在我找到这篇文章之前，我挠了一下头-谢谢Jean-Baptiste Martin-您的代码将我引向了这一点...

给出一个数据集，例如[201、203、20004等]-我抓到最大的并得到长度。每个角色7个填充似乎对我有用。长度-1表示要减去1，因为第一个字符对我来说很好-只需为其他所有其他字符添加填充。

Hacky，但是这似乎可行（在2.8版上）-我测试了高达40854385394的数字，直到只有一位数字，这对我来说已经足够了！

options: {
  layout: { padding: { left: (this.data.reduce((a, b) => a > b ? a : b).toString().length - 1) * 7 } 
}

Answer 4

自最初发布此问题以来，chart.js的行为可能已更改。对于v2.9.3，我仅在y轴刻度包含整数和浮点值的混合的情况下才看到此问题。在这种情况下（不幸的是，我是主要情况），小数点后的数字会被裁剪。

下面是对我有用的。在我的解决方案中，当 是int和float的混合物时，我只是设置了恒定的填充量（30px）以容纳浮点数字；您可能需要一个不同的值。希望这可以帮助其他人避免一天的挣扎。

yAxes: [
    {
        ...
        ticks: {
            callback: (value, index, label_values) => {
                // Once per cycle through all the ticks, set the label padding appropriately
                // For unknown reasons sometimes chartjs passes a 1-point values array, which has no meaning. Ignore those.
                if (label_values.length > 1 && value === label_values[0]) {
                    // If labels have mixture of int & float, manually set the padding to give enough space for the decimal places.
                    const mixed_int_and_float_labels = label_values.some(v => Number.isInteger(v)) && !label_values.every(v => Number.isInteger(v));
                    this.chart.options.layout.padding.left = mixed_int_and_float_labels ? 30 : 0;
                }
                return value;
            }
        },
    }
]