Question

我刚刚学习了有关使用图表绘制动态图表的信息。我需要帮助，我正在尝试使用来自this（第2个）之类的php数据制作动态样条图。然后，我尝试通过更改php中的数据来在其下创建一个动态样条图（不同的div）。但是结果仅显示在下面的图表中（图表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

如何在一页上显示两个动态样条图？

0 个答案: