Question

我有一个渲染融合图表的JSP。该图表使用Spring来获取使用MyBatis作为ORM呈现的数据。当我点击渲染图表的超链接时，页面将永远加载，因为提取的数据很大。我希望图表在查询运行时显示图表中的“加载数据”栏。 JSP的其他部分应该是可见的，并且图表在获取数据时应该显示“加载”。使用Flash配置的FUSION Flash版本。提前谢谢。

Answer 1

您的页面似乎需要花费大量时间才能显示，因为要从ORM获取大量数据。显示JSP页面时以及FusionCharts正在渲染图表的过程中，将显示“加载图表”消息。但在您的情况下，JSP页面根本不会呈现。

作为此问题的解决方案，请尝试分离两个进程，以便有两个服务器端页面

当您单击超链接并显示JSP页面时，控制权归到谁
在加载JSP页面时，调用AJAX函数并将请求发送到另一个服务器端页面，该页面检索FusionCharts加载所需的数据。接收数据后，图表可以绘制数据。当图表绘制数据时，会显示“加载图表”消息。并且，在收到数据之前，您可以在div中显示自定义消息。

由于AJAX会在回来时通知您，因此您可以通过此操作实现您的目标。

Answer 2

请参阅下面的代码，并确保在数据提供程序页面（Servlet）中使用“PrintWriter”对象将XML / JSON数据输出到页面的调用者（loadFusionCharts（）函数）

<script language='JavaScript'> //in the head section
/* create AJAX object */
function getXMLObject()
    {
        var xmlHttp = false;
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
                xmlHttp = false;
            }
        }
        if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
            xmlHttp = new XMLHttpRequest();
        }
        return xmlHttp;
    }

var xmlhttp = new getXMLObject();

/*function to be called "onload" of body */
function loadFusionCharts()

{
  if (xmlhttp.readyState == 4 || xmlhttp.readyState == 0)
    {
    var url="someURL";  //URL of data provider page that gets data from database
    xmlhttp.open("POST", url, true);
    xmlhttp.onreadystatechange = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xmlhttp.send(null);
    }
}
/* gets called when AJAX response comes back after executing the data provider page*/
function handleServerResponse()
    { 
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            var chartData = xmlhttp.responseText;
            if (chartData!="") 
            {
          var myChart = new FusionCharts( "./FusionCharts/ScrollCombi2D.swf","ChartId", "1040", "320", "0", "0");
          myChart.setXMLData(chartData);
          myChart.render("fcDiv");  
            }else{
                document.getElementById('fcDiv').innerHTML="Could not get data to render the chart";
            }
         }
    }

</script>
</head>
<body onload='loadFusionCharts()'>

在融合图表中显示“加载数据”

2 个答案: