Я искал это некоторое время и все еще не мог найти решение моей проблемы с SOF.
Дело в том, что у меня есть этот график с большим количеством полосок, и я использую для этого диаграмму JS, но кажется, что только первая полоса получает цвет, все остальные серые.
Вот что у меня есть для моего файла '. js':
async function positiveCasesDailyGraph() {
const data = await getData();
const ctx = document.getElementById('positive-daily-new').getContext('2d');
const options = {
responsive: true,
maintainAspectRatio: false,
tooltips: {
mode: 'index',
intersect: false
},
hover: {
mode: 'average',
intersect: false
},
scales: {
yAxes: [{
display: true,
gridLines: {
display: true,
color: "rgba(255, 255, 255, 0.05)"
},
stacked: false
}],
xAxes: [{
label: 'Casos',
display: true,
gridLines: {
display: true,
color: ['rgba(255, 255, 255, 0.5)']
},
}]
}
};
const graph = {
labels: data.xs,
datasets: [
{
label: 'Casos diários',
data: data.yPositiveDaily,
backgroundColor: ['rgba(0, 65, 139, 0.5)'],
borderColor: ['rgba(0, 65, 139, 1)'],
borderWidth: 2,
lineTension: 0.5,
fill: true
}
]
};
const myChart = new Chart(ctx, {
options: options,
type: 'bar',
data: graph,
});
}
async function getData() {
const xs = [];
const yPositiveDaily = [];
const response = await fetch('data.csv');
const data = await response.text();
const table = data.split('\n').slice(1);
table.forEach(row => {
const columns = row.split(',');
const days = columns[0];
const positiveDaily = columns[8];
xs.push(days);
yPositiveDaily.push(positiveDaily);
});
return { xs, yPositiveDaily };
}
А вот скриншот части графика: Только первая полоса красочная
Есть какие-нибудь подсказки о том, что я делаю неправильно и что мне делать вместо этого?
Заранее спасибо.