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