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,
пример бы минимальный но полностью. [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Дополнил
|
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,
ваша ошибка в том что 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'); |
Спасибо! Теперь все понятно. Надеюсь, дальше проблем не возникнет.
|
Часовой пояс GMT +3, время: 10:53. |