Я только что узнал о создании динамических диаграмм с использованием высоких диаграмм.Мне нужна помощь, я пытаюсь создать динамический сплайн-график с данными из php, например this (номер 2).Затем я пытаюсь создать динамическую сплайн-диаграмму под ней (другой div), изменяя данные в php.Но результаты показывают только график ниже (график B), на графике A не отображаются данные, как до добавления графика B.Я спросил, как сделать две динамические сплайн-диаграммы на одной странице?спасибо
Это код, который я использую
<?php //PHP for Chart A
// Set the JSON header
header("Content-type: text/json");
// The x value is the current JavaScript time, which is the Unix time multiplied
// by 1000.
$x = time() * 1000;
// The y value is a random number
$y = rand(0, 100);
// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);
?>
<?php //PHP for Chart B
// Set the JSON header
header("Content-type: text/json");
// The x value is the current JavaScript time, which is the Unix time multiplied
// by 1000.
$x = time() * 1000;
// The y value is a random number
$y = rand(100, 200);
// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);
?>
это код JavaScript:
//JS of Chart A
var chart;
function requestData() {
$.ajax({
url: 'dataChartA.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is
// longer than 20
// add the point
chart.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
document.addEventListener('DOMContentLoaded', function() {
chart = Highcharts.chart('chartA', {
chart: {
type: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Chart A'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'Chart A',
data: []
}]
});
});
//JS for Chart B
var chart;
function requestData() {
$.ajax({
url: 'dataChartB.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is
// longer than 20
// add the point
chart.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
document.addEventListener('DOMContentLoaded', function() {
chart = Highcharts.chart('chartB', {
chart: {
type: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Chart B'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value B',
margin: 80
}
},
series: [{
name: 'Chart B',
data: []
}]
});
});
</head>
<body>
<div id="chartA"></div>
<div id="chartB"></div>
</body>
Результаты в браузере: https://imgur.com/kAVGQUk