Question

我有一个html页面，其中有两个div。在每个div中我加载不同的jsp文件（ one.jsp和two.jsp ）。

home.html的：

<script src="resources/js/jquery.js"></script>
  <script type="text/javascript" src="resources/js/highcharts.js"></script>
    <script type="text/javascript" src="resources/js/exporting.js"></script>
    <script type="text/javascript" src="resources/js/export-csv.js"></script> 
<script>
 function loadGraphs()
   {
    $('#plotContainer1').load('one.jsp');
    $('#plotContainer2').load('two.jsp');
   }
</script>

其中plotContainer1和plotContainer2是两个div。所以我想一次加载两个图表。

one.jsp：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<div id="container1" style="min-width: 350px; height: 350px; margin: 0 auto"></div>
<script type="text/javascript">
var seriesArray;
var chart;
callAjax();
var graphTitle = "";
var chart;

function drawgraph1() {

    Highcharts.setOptions({
        colors: ['#54CBE5', '#57B442']
    });
    chart =  $('#container1').highcharts({
        chart: {
            zoomType: 'x'
        },
             title: {
                text: graphTitle
         },
         xAxis: {
            tickInterval: 30,
            type: 'datetime',

               categories: xAxisCategories 
        },
        yAxis: {
            min : 0,
            title: {
                text: ''
            },
        plotLines : [ {
            value : 0,
            width : 1,
            color : '#808080'
        } ]

       },

        plotOptions: {
            series: {
                marker: {
                    enabled: false
                }
            }
        }, 
            series : seriesArray
    });

};

function callAjax() {
    $("#container1").empty();

         seriesArray = [{
                name: 'line1',
                data: []
            }, {
                name: 'line2',
                data: []
            }];
    xAxisCategories = [];

    var params = {"param1" : value};        
    $.getJSON("graph1datafetcher",params, function(data) {

            $.each(data, function(key, val) {
                var xaxisPoints=data[key];
                xAxisCategories.push(Date.parse(key));
                for(var i in xaxisPoints) {
                    seriesArray[i].data.push(xaxisPoints[i]);  
                }
            });

            console.log(" JSON: " + JSON.stringify(data));

            drawgraph1();
        });
}

</script>

</body>
</html>

two.jsp 几乎包含相同的代码。现在首先加载 two.jsp ，因为与 one.jsp 相比，它包含的数据更少。当 one.jsp 加载并显示在div中时， one.jsp 图表也会显示 two.jsp 数据及其自己的数据。我正在控制台中记录数据，即将到来的数据很好。所以，问题出在某个地方，高图持续存在第一个数据。过去7个小时我一直在努力。有人可以回答如何解决这个问题吗？

Highcharts也会渲染其他图形的数据

0 个答案: