Установите минимальный размер шага в диаграмме js
Я использую версию 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
Я использую этот размер шага, чтобы игнорировать значение точки, например, "0,5", оно показывает, когда максимальные значения графа id меньше, например, "2".
если я использую это, он всегда устанавливает шаг "1", который выглядит очень неудобно, если он имеет высокое значение, например, "100".
Я ищу такую вещь: suggestMin = 1
Есть ли какая-либо вещь, чтобы определить минимальный размер шага, который не следует фиксировать в случаях с более высокими значениями.
Ответы
Ответ 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, как использовать это.
Ответ 2
ticks: {
precision: 0
}
Это работает так же хорошо, как функция обратного вызова выше и намного чище.
Если точность определена, а stepSize не указан, размер шага будет округлен до такого количества десятичных разрядов.
https://www.chartjs.org/docs/latest/axes/cartesian/linear.html