Javascript-форум - Показать сообщение отдельно

thislegion · #1 (**permalink**) 27.04.2022, 14:04

Возникла проблема с графиками. Если вывести один график, потом другой и провести мышкой по ним, то начинает выводиться предыдущий. На видео видна проблема. Пробовал применять desroy(), но не выходит.

Проблема на видео:
https://www.youtube.com/watch?v=9TM9KAqCtIQ

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

<script>
$(document).ready(function(){
  $("#Chart").click(function(e){
    $("#myChart").load("chart1.html");
  });
    $("#Chart2").click(function(){
    $("#myChart").load("chart2.html");
  });
});
</script>

</head>
<body>
    
<center>    

<div style="width:50%; height:50%;">   
<canvas id="myChart"></canvas>
</div>

<button id="Chart">Chart1</button>  <button id="Chart2">Chart2</button>
</center>

</body>
</html>

chart1.html

<script>
let ctx24H = document.getElementById('myChart').getContext('2d');
let myChart24H = new Chart(ctx24H, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: ['14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00'],
        datasets: [{
           label: 'Chart1',
           backgroundColor: 'green',
           borderColor: 'green',
            data: [3489232.93, 3488001.87, 3491390.86, 3490964.28, 3501647.62, 3506139.13, 3501166.91, 3490987.37, 3508376.26, 3512072.3, 3509476.1, 3514422.84, 3531391.54, 3525169.58, 3471238.49, 3473480.59, 3472926.87, 3486888.18, 3485484.42, 3466157.64, 3430258.09, 3345404.52, 3343581.78, 3336642.41, 3329677.19],
            fill: false
        }]
    },

    // Configuration options go here
    options: {}
});

</script>

chart2.html

<script>

let ctx1H = document.getElementById('myChart').getContext('2d');
let myChart1H = new Chart(ctx1H, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: ['14:00', '14:03', '14:06', '14:09', '14:12', '14:15', '14:18', '14:21', '14:24', '14:27', '14:30', '14:33', '14:36', '14:39', '14:42', '14:45', '14:48', '14:51', '14:54', '14:57', '15:00'],
        datasets: [{
           label: 'Chart2',
           backgroundColor: 'green',
           borderColor: 'green',
            data: [3329677.19, 3328763.69, 3328785.51, 3334936.04, 3331116.42, 3330874.96, 3325369.19, 3330384.6, 3345708.31, 3358935.6, 3351483.22, 3355712.07, 3354970.47, 3358737.72, 3355784.38, 3379214.26, 3380413.02, 3386731.44, 3382988.9, 3385982.08, 3387296.43],
            fill: false
        }]
    },

    // Configuration options go here
    options: {}
});

</script>