Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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.
Ответить с цитированием
  #2 (permalink)  
Старый 03.08.2021, 16:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

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

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 03.08.2021, 16:54
Интересующийся
Отправить личное сообщение для Ktoto210978 Посмотреть профиль Найти все сообщения от Ktoto210978
 
Регистрация: 03.08.2021
Сообщений: 10

Дополнил
Ответить с цитированием
  #4 (permalink)  
Старый 03.08.2021, 17:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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]));
Ответить с цитированием
  #5 (permalink)  
Старый 04.08.2021, 08:01
Интересующийся
Отправить личное сообщение для Ktoto210978 Посмотреть профиль Найти все сообщения от Ktoto210978
 
Регистрация: 03.08.2021
Сообщений: 10

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

Последний раз редактировалось Ktoto210978, 04.08.2021 в 08:10.
Ответить с цитированием
  #6 (permalink)  
Старый 04.08.2021, 08:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Ktoto210978,
ваша ошибка в том что cfd один для всех, в моём коде у каждого свой. ваш код тоже рабочий если сделать cfd в цикле вместо строк 63 - 66 пост#1
Ответить с цитированием
  #7 (permalink)  
Старый 04.08.2021, 08:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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');
Ответить с цитированием
  #8 (permalink)  
Старый 04.08.2021, 08:31
Интересующийся
Отправить личное сообщение для Ktoto210978 Посмотреть профиль Найти все сообщения от Ktoto210978
 
Регистрация: 03.08.2021
Сообщений: 10

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Имитировать нажатие на кнопки на странице через скрипт tampermonkey realmen80 Общие вопросы Javascript 5 26.02.2021 13:40
Помогите спрятать элемент на странице Virusx2000 Элементы интерфейса 2 18.01.2019 18:49
Заставить работать скрипт для навигации по странице при переходе извне geol.post jQuery 5 29.10.2015 13:35
Динамическое отображение контента на 2ой странице, в зависимости от выбора на 1ой Volchen0ck Events/DOM/Window 2 14.05.2014 16:01
Не выполняется скрипт на подгружаемой странице AlThar ExtJS 1 21.01.2011 15:10