Показать сообщение отдельно
  #1 (permalink)  
Старый 03.08.2021, 16:27
Интересующийся
Отправить личное сообщение для Ktoto210978 Посмотреть профиль Найти все сообщения от Ktoto210978
 
Регистрация: 03.08.2021
Сообщений: 10

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