Question

我使用Chart.js 2.0版本绘制图表，我想在条形图中定义最小步长

var myNewChart = new Chart(grapharea, {
                type: 'bar',
                data: barData,
                options: {
                    responsive: true,                        
                    scales: {
                        yAxes: [
                            {
                                ticks: {
                                    min: 0, // it is for ignoring negative step.
                                    beginAtZero: true,
                                    stepSize: 1  // if i use this it always set it '1', which look very awkward if it have high value  e.g. '100'.
                                }
                            }
                        ]
                    }
                }
            });

这次我正在使用

stepSize：1

我正在使用此步长忽略点值，例如＆＃39; 0.5＆＃39; ，它会显示最大图表值不足的情况，例如＆＃39; 2＆＃39;。
如果我使用它，它总是设置它的步骤，如果它具有高值，则看起来很尴尬。＆＃39; 100＆＃39;

我正在寻找这样的事情： suggestMin = 1

是否有任何东西可以定义最小步长，在较高值的情况下不应该修复。

Answer 1

如果您不想显示点值（例如0.5）标签，您可以编写一个回调函数来过滤点值标签，而不是使用stepSize。

像这样：

ticks: {
    min: 0, // it is for ignoring negative step.
    beginAtZero: true,
    callback: function(value, index, values) {
        if (Math.floor(value) === value) {
            return value;
        }
    }
}

在这里工作小提琴：https://jsfiddle.net/ma7h611L/

<强>更新

如下面Atta H.和Lekoaf所述，Chart.js将精确属性添加到刻度线。它从版本2.7.3开始提供。请参阅Lekoaf的answer如何使用它。

Answer 2

ticks: {
    precision: 0
}

此功能与上面的回调函数同样有效，并且更加简洁。

精度，如果已定义且未指定stepSize，则步长将舍入到这么多小数位。

https://www.chartjs.org/docs/latest/axes/cartesian/linear.html

在图表js中设置最小步长

2 个答案:

<强>更新