У меня есть следующий кусок js:
var canvas_link = document.getElementById("chart1").getContext("2d");
var myChart = new Chart(canvas_link, {
type: 'bar',
data: {
labels: xvalues,
datasets: [{
label: area_option,
data: data,
backgroundColor: 'rgba(255, 99, 132, 1)',
}]
},
})
Этот фрагмент кода выводит следующий график:[![введите здесь описание изображения][1]][1]
Метки внизу действительно переполнены, и я хотел просто иметь квартальный диапазон по оси x. В настоящее время метки имеют строковый формат. Любые советы будут очень признательны, так как мне трудно понять документацию. Я попытался удалить некоторые значения в массиве для меток, но это просто приводит к неупорядоченным пробелам. Спасибо!
Существует специальный тип оси — время, и его можно использовать для автоматического масштабирования меток оси X.
Шкала времени используется для отображения времени и даты.
При построении своих тиков он автоматически рассчитает наиболее удобную единицу, исходя из размера шкалы.
Опция labels
не нужна, а data
следует преобразовать в массив { x: new Date('2020-12-01'), y: 123 }
.
const data = [
{ x: new Date('2020-12-01'), y: 123 },
{ x: new Date('2020-12-02'), y: 134 },
{ x: new Date('2020-12-03'), y: 154 },
// etc.
],
Ось X также должна быть настроена для использования типа time
(похоже, она не определяет его автоматически)
var myChart = new Chart(canvas_link, {
type: 'bar',
data: {
// labels: xvalues, (not needed)
datasets: [{
label: area_option,
data: data, // note: should be new data not the old one
backgroundColor: 'rgba(255, 99, 132, 1)',
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
display: true,
scaleLabel: {
display: true,
labelString: 'Date'
},
ticks: {
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
}
}
}],
}
}
})
Вы можете найти мой код здесь.
ОБНОВЛЕНО: ось X показывает только кварталы/месяцы.
Добавление unit: 'quarter'
или unit: 'month'
может сгруппировать метки оси X по кварталам или месяцам.
Другие поддерживаемые единицы можно найти в документации.
Обновленную версию можно найти здесь
var myChart = new Chart(canvas_link, {
type: 'bar',
data: {
datasets: [{
data: data,
label: 'Data',
backgroundColor: 'rgba(255, 99, 132, 1)',
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
display: true,
scaleLabel: {
display: true,
labelString: 'Date'
},
time: {
unit: 'quarter',
},
ticks: {
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
}
}
}],
}
}
})
Это потрясающе!! Спасибо большое, завтра сделаю тест и подтвержу ответ!!! Всем большое спасибо за помощь!!! <3