Проблема с графиками
Возникла проблема с графиками. Если вывести один график, потом другой и провести мышкой по ним, то начинает выводиться предыдущий. На видео видна проблема. Пробовал применять 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>
|
thislegion,
грузите только данные и их меняйте в одном объекте, не надо создавать кучу графиков, если вам нужен только один. |
Цитата:
|
chart получение данных для диаграммы
thislegion,
<!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() {
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: {}
});
$("#Chart").click(function(e) {
let 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
}]
};
myChart24H.config.data = data;
myChart24H.update();
/* $.getJSON( "ajax/Chart1.json", function( data ) {
myChart24H.config.data = data;
myChart24H.update();
});*/
});
$("#Chart2").click(function() {
let 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
}]
};
myChart24H.config.data = data;
myChart24H.update();
/* $.getJSON( "ajax/Chart2.json", function( data ) {
myChart24H.config.data = data;
myChart24H.update();
});*/
});
});
</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>
|
| Часовой пояс GMT +3, время: 10:06. |