Различное количество меток и данных в Chart.js
Я пытаюсь создать диаграмму, на которой может не быть такого же количества данных и меток.
Например, у меня есть метка для каждого месяца, но, возможно, для марта или августа у меня нет значения.
Я пробовал со следующим кодом:
var options = {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'Test',
backgroundColor: 'red',
data: [{
'x': 'Apr',
'y': 40
}, {
'x': 'July',
'y': 70
}, {
'x': 'Dec',
'y': 120
}]
}]
},
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'My Test'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
}
var ctx = document.getElementById('canvas').getContext('2d');
new Chart(ctx, options);
Но он отображает значение в неправильном положении, как на изображении.
Как я могу это исправить?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Если у вас нет значения для какого-либо месяца, укажите 0 в качестве данных для того же самого.
var options = {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
datasets:[
{
label: 'Test',
backgroundColor: 'red',
data: [0,0,0,40,0,0,70,0,0,0,0,120]
}
]
},
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'My Test'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
}
var ctx = document.getElementById('canvas').getContext('2d');
new Chart(ctx, options);
Chart.js поддерживает все форматы, которые принимает Moment.js («МММ ГГГГ»). Просто добавление года должно помочь.
But it displays the value in the wrong position as it is in the image
Это потому, что indexes предоставленных вами данных соответствует первым трем значениям ваших меток.
Решение №1:
Чтобы решить эту проблему, вам нужно выровнять длину меток с длиной вашего набора данных, предоставив значения-заполнители для недостающих точек в ваших данных.
Не используйте нули в качестве заполнителя для несуществующих значений в вашем наборе данных, если вы не хотите, чтобы Chartjs отображал данные диаграммы таким образом. [См. Короткие серые области, обозначающие нулевые значения.]
Поэтому лучший способ справиться с этим - вместо этого предоставить значения null. См. Рабочий пример ниже.
const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
const data = [{'x':'Apr', 'y':40},{'x':'July', 'y':70},{'x':'Dec', 'y':120}];
const filledMonths = data.map((month) => month.x);
const dataset = labels.map(month => {
const indexOfFilledData = filledMonths.indexOf(month);
if ( indexOfFilledData!== -1) return data[indexOfFilledData].y;
return null;
});
console.info(dataset);Решение №2: В Chartjs> 2.x вы можете использовать time scale
Если у вас много данных и вы не хотите использовать значения-заполнители для отсутствующих данных, тогда вы устанавливаете тип шкалы xAxes как time в параметрах диаграммы.
Вот Ответ, использующий эту реализацию.