javascript — почему линейные графики chart.js перекрывают друг друга?

почему линейные графики chart.js перекрывают друг друга?

Я видел похожие вопросы о StackOverflow, но ни один из ответов не помог мне до сих пор.

Я использую chart.js в своем веб-проекте, но теперь, когда я хочу показать 2 линейных графика в одном и том же контейнере, они делают странные вещи, даже если я настраиваю родительский контейнер или пытаюсь обернуть холст div.

вот часть кода:

 [...] {amp}lt;!--the big white container--{amp}gt; {amp}lt;div class="Card Fill" id="5da78c0de214b0020e86f53a"{amp}gt; {amp}lt;div class="Details"{amp}gt; {amp}lt;span{amp}gt;entradas:30{amp}lt;/span{amp}gt; {amp}lt;span{amp}gt;duracion: 0:02{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="ChartContainer"{amp}gt; {amp}lt;div class="ChartWraper"{amp}gt; {amp}lt;canvas id="tempGraph"{amp}gt;{amp}lt;/canvas{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="ChartWraper"{amp}gt; {amp}lt;canvas id="ppmGraph"{amp}gt;{amp}lt;/canvas{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; [...] 
 function drawChart(canvas, datasetLabel, data, labels) { window[datasetLabel] = new Chart( document.getElementById(canvas), { type: 'line', data: { datasets: [ { lineTension: 0.1, label: datasetLabel, fill: true, data: data } ], labels: labels }, options: { scales: { xAxes: [{ display: true }] } } } ); } //ask api for data array window.onload = function () { let droneId = document.getElementsByClassName("Card")[0].id; axios.get(`/api/vuelos/data/${droneId}`) .then((response) ={amp}gt; { responseData = response.data; let factorized = refractor(response.data); //separate the data from the drone into arrays drawChart("tempGraph", "temperatura", factorized.temp, factorized.labels); drawChart("ppmGraph", "particulas por millon", factorized.ppm, factorized.labels); }) .catch((error) ={amp}gt; { alert(error.message); console.log(error); }); } 
 .Card { position: relative; /* soo that i can relocate the options inside*/ background: var(--background); padding: 30px; border-radius: 15px; margin: 10px; box-shadow: var(--ui-shawdow); } .Fill{ width: 100%; height: 100%; } .Card {amp}gt; .Details { padding: 10px; display: flex; flex-direction: column; align-content: space-around; } .ChartContainer{ display: flex; flex-direction: column; align-content: space-between; height: 50%; } .ChartWraper{ height: 40%; width: 100%; } canvas{ height: 40%; } 

Что я могу делать не так? Я пытался изменить вещи в CSS или HTML, но, похоже, не работает

Я хочу, чтобы это выглядело так, как надо, отзывчиво, без переполнения карты.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector