Chart.js несколко диаграмм на странице

[Ktoto210978]

Здравствуйте.
Создаю на странице несколько диаграмм, заполняю данными. Но после Изменения размера страницы все диаграммы становятся одинаковыми. Как с этим бороться?

<div class="card-deck my-2 d">
                            <div class="card col-3">
                                
                                <canvas id="chartDynamicUs" width="100" height="100"></canvas>
                             
                            </div>
                            <div class="card col-3 d">
                                
                                <canvas id="chartDynamicPr" width="100" height="100"></canvas>
                                
                            </div>
                            <div class="card col-3 d">
                                
                                <canvas id="chartDynamicSp" width="100" height="100"></canvas>
                                
                            </div>
                            <div class="card col-3 d">
                                
                                <canvas id="chartDynamicSu" width="100" height="100"></canvas>
                                
                            </div>
                           
                        </div>
                </div>
<script>
let  chartDynamicUs, chartDynamicPr, chartDynamicSp, chartDynamicSu;
let cfd = {
         type: 'line',
         data: {
             labels: [],
             datasets: [{
                 data: [],
                 borderColor: 'green',
                 borderWidth: 2,
                 tension: 0.5
                 }]
             },
         options: {
             
             plugins: {
                 legend: {display: false}
             }, 
             indexAxis: 'x',
             responsive: true,
             suggestedMin: -10,
             suggestedMax: 200,
             scales: {
                 Y: {
                 beginAtZero: true
                 }
             }
         }
     };

function addData(chart, label, data, color) {
         chart.data.labels = label;
         chart.data.datasets[0].data = data;
         chart.data.datasets[0].borderColor = color;
         chart.update();
     }
     
         
         chartDynamicUs = new Chart($('#chartDynamicUs'),cfd);
         chartDynamicPr = new Chart($('#chartDynamicPr'),cfd);           
         chartDynamicSp = new Chart($('#chartDynamicSp'),cfd);          
         chartDynamicSu = new Chart($('#chartDynamicSu'),cfd);
         
         addData(chartDynamicSu, dynamic.days, dynamic.su, 'blue');
         addData(chartDynamicUs, dynamic.days, dynamic.us, 'green');
         addData(chartDynamicPr, dynamic.days, dynamic.pr, 'red');
         addData(chartDynamicSp, dynamic.days, dynamic.sp, 'orange');
</script>

[рони]

Ktoto210978,
пример бы минимальный но полностью.

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[Ktoto210978]

Дополнил

[рони]

Ktoto210978,
как вариант ...

let cards = [...document.querySelectorAll('.card > canvas')];
cards = cards.map(elem => {
    let cfd = {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                data: [],
                borderColor: 'green',
                borderWidth: 2,
                tension: 0.5
            }]
        },
        options: {
            plugins: {
                legend: {
                    display: false
                }
            },
            indexAxis: 'x',
            responsive: true,
            suggestedMin: -10,
            suggestedMax: 200,
            scales: {
                Y: {
                    beginAtZero: true
                }
            }
        }
    };
    return new Chart(elem, cfd);
})
function addData(chart, label, data, color) {
    chart.data.labels = label;
    chart.data.datasets[0].data = data;
    chart.data.datasets[0].borderColor = color;
    chart.update();
}
let opt = [
    [dynamic.su, 'blue'],
    [dynamic.us, 'green'],
    [dynamic.pr, 'red'],
    [dynamic.sp, 'orange']
];
cards.forEach((elem, i) => addData(elem, dynamic.days, ...opt[i]));

[Ktoto210978]

Большое спасибо!
С массивами гораздо лучше. Нельзя ли пояснить, в чем разница? Почему в моем случае данные в диаграммах перезаписываются? Я вижу отличие только в том, что у Вас диаграммы в массиве, а у меня в отдельных переменных.

[рони]

Ktoto210978,
ваша ошибка в том что cfd один для всех, в моём коде у каждого свой. ваш код тоже рабочий если сделать cfd в цикле вместо строк 63 - 66 пост#1

[рони]

Ktoto210978,

let chartDynamicUs, chartDynamicPr, chartDynamicSp, chartDynamicSu;

function addData(chart, label, data, color) {
    chart.data.labels = label;
    chart.data.datasets[0].data = data;
    chart.data.datasets[0].borderColor = color;
    chart.update();
}
let arrCfg = Array.from({
    length: 4
}, _ => ({
    type: 'line',
    data: {
        labels: [],
        datasets: [{
            data: [],
            borderColor: 'green',
            borderWidth: 2,
            tension: 0.5
        }]
    },
    options: {
        plugins: {
            legend: {
                display: false
            }
        },
        indexAxis: 'x',
        responsive: true,
        suggestedMin: -10,
        suggestedMax: 200,
        scales: {
            Y: {
                beginAtZero: true
            }
        }
    }
}));
chartDynamicUs = new Chart($('#chartDynamicUs'), arrCfg[0]);
chartDynamicPr = new Chart($('#chartDynamicPr'), arrCfg[1]);
chartDynamicSp = new Chart($('#chartDynamicSp'), arrCfg[2]);
chartDynamicSu = new Chart($('#chartDynamicSu'), arrCfg[3]);
addData(chartDynamicSu, dynamic.days, dynamic.su, 'blue');
addData(chartDynamicUs, dynamic.days, dynamic.us, 'green');
addData(chartDynamicPr, dynamic.days, dynamic.pr, 'red');
addData(chartDynamicSp, dynamic.days, dynamic.sp, 'orange');

[Ktoto210978]

Спасибо! Теперь все понятно. Надеюсь, дальше проблем не возникнет.