一页错误的多个Highcharts

时间:2015-03-08 02:50:20

标签: javascript jquery highcharts singlepage

我有一个简单的问题,但让我困惑

我有这样的动态样条代码高级代码

<script type="text/javascript">
var chart;

 /**
 * Request data from the server, add it to the graph and set a timeout 
 * to request again
 */
function requestData() {
    $.ajax({
        url: 'live-server-data.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
    });
}

Highcharts.setOptions({global: { useUTC: false } });

$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container1',
            defaultSeriesType: 'spline',
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        },
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Value',
                margin: 80
            }
        },
        series: [{
            name: 'Random data',
            data: []
        }]
    });        
});
</script>

<script type="text/javascript">




var chart;

 /**
 * Request data from the server, add it to the graph and set a timeout 
 * to request again
 */
function requestData() {
    $.ajax({
        url: 'live-server-data.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
    });
}

Highcharts.setOptions({global: { useUTC: false } });

$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container2',
            defaultSeriesType: 'spline',
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        },
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Value',
                margin: 80
            }
        },
        series: [{
            name: 'Random data',
            data: []
        }]
    });        
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

 <div id="container1"
 style="min-width: 728px; height: 400px; margin: 0 auto"></div>
 <br></br>

 <div id="container2"
 style="min-width: 728px; height: 400px; margin: 0 auto"></div>

但只有第二张图表有x轴时间,在第一张图表上没有显示时间在运行时间。如果我添加第三个容器3,也只有最后一个图表显示运行时间。

感谢您的回答并抱歉我的英文不好

0 个答案:

没有答案