页面提交后图表消失

时间:2018-04-17 08:33:17

标签: javascript html oracle-apex-5.1 anychart

我正在尝试使用具有可折叠动态内容区域的新移动主题构建Oracle Apex 5.1应用程序。 在这个区域后面有一个pl / sql代码,它将图表小码打印到HTML主体中,该主体由一个"主机" div和一个生成图表(AnyChart 7.14.4)的JS脚本块。

在第一页访问时一切正常但是当我按下通过动态操作提交页面的区域按钮(在另一个静态区域中)时,图表完全消失了(虽然div保持跨越到它的原始大小)。

你知道这个症状背后的原因吗?

!UPDATE!

此JS函数由页面处理(预渲染/区域之前)生成:



function createChart() {

		anychart.theme("darkEarth");				

		var dataSet = [
["2006.10.17",212.82,22.58,3.10,2.79],
["2006.10.18",212.04,22.57,3.10,2.81],
["2006.10.19",208.46,22.40,3.06,2.78],
["2006.10.20",208.60,22.43,3.06,2.78],
["2006.10.23",210.47,22.56,3.08,2.81],
["2006.10.24",209.18,22.57,3.09,2.80],
["2006.10.25",208.00,22.50,3.08,2.78],
["2006.10.26",205.22,22.35,3.04,2.76],
["2006.10.27",204.89,22.26,3.04,2.76],
["2006.10.30",205.93,22.20,3.05,2.76],
["2006.10.31",204.41,22.00,3.03,2.75],
];	

		var seriesList = anychart.data.mapAsTable(dataSet);
		
		var chart = anychart.line();
		chart.crosshair().enabled(true).yLabel().enabled(false);
		chart.crosshair().yStroke(null);
		chart.tooltip().positionMode("point");		
		chart.yAxis().title("%");

		var credits = chart.credits();
		credits.enabled(false);

		chart.animation(true);
		chart.title().enabled(false);
		chart.xAxis().labels().padding([5]);

		var series_1 = chart.line(seriesList[0]);
		series_1.name("HUF");
		
		var series_2 = chart.line(seriesList[1]);
		series_2.name("CZK");
		
		var series_3 = chart.line(seriesList[2]);
		series_3.name("PLN");
		
		var series_4 = chart.line(seriesList[3]);
		series_4.name("RON");
		
		for (i = 0; i < chart.getSeriesCount(); i++) 
    {
      chart.getSeriesAt(i).hoverMarkers().enabled(true).type("circle").size(4);
			chart.getSeriesAt(i).tooltip().position("right").anchor("left").offsetX(5).offsetY(5);

    }

		chart.legend().enabled(true).fontSize(13);
		chart.container("chartContainer");
	
		chart.draw();
}
&#13;
&#13;
&#13;

接下来是位置body2中的静态区域,其中包含以下内容:

&#13;
&#13;
<div id="chartContainer"></div>
<script type="text/javascript">
    anychart.onDocumentReady(function() {
        createChart();
    });
</script>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

我们担心这个问题超出了AnyChart地区的责任范围。此外,我们从未遇到过类似的问题。我们建议您将此查询转发给Oracle技术支持。

答案 1 :(得分:0)

我在这里做了一个测试页面:https://apex.oracle.com/pls/apex/f?p=145797:18

登录:https://apex.oracle.com/pls/apex/f?p=4550

workspace: stackquestions
login: test
pwd: test
app: 145797
page: 18

在这个页面中,我有一个关于“预渲染”&gt;的过程。 “在地区之前”

begin
htp.p(
'<script>
function createChart() {

        anychart.theme("darkEarth");                

        var dataSet = [
["2006.10.17",212.82,22.58,3.10,2.79],
["2006.10.18",212.04,22.57,3.10,2.81],
["2006.10.19",208.46,22.40,3.06,2.78],
["2006.10.20",208.60,22.43,3.06,2.78],
["2006.10.23",210.47,22.56,3.08,2.81],
["2006.10.24",209.18,22.57,3.09,2.80],
["2006.10.25",208.00,22.50,3.08,2.78],
["2006.10.26",205.22,22.35,3.04,2.76],
["2006.10.27",204.89,22.26,3.04,2.76],
["2006.10.30",205.93,22.20,3.05,2.76],
["2006.10.31",204.41,22.00,3.03,2.75],
];  

        var seriesList = anychart.data.mapAsTable(dataSet);

        var chart = anychart.line();
        chart.crosshair().enabled(true).yLabel().enabled(false);
        chart.crosshair().yStroke(null);
        chart.tooltip().positionMode("point");      
        chart.yAxis().title("%");

        var credits = chart.credits();
        credits.enabled(false);

        chart.animation(true);
        chart.title().enabled(false);
        chart.xAxis().labels().padding([5]);

        var series_1 = chart.line(seriesList[0]);
        series_1.name("HUF");

        var series_2 = chart.line(seriesList[1]);
        series_2.name("CZK");

        var series_3 = chart.line(seriesList[2]);
        series_3.name("PLN");

        var series_4 = chart.line(seriesList[3]);
        series_4.name("RON");

        /*for (i = 0; i < chart.getSeriesCount(); i++) 
    {
      chart.getSeriesAt(i).hoverMarkers().enabled(true).type("circle").size(4);
            chart.getSeriesAt(i).tooltip().position("right").anchor("left").offsetX(5).offsetY(5);

    }*/

        chart.legend().enabled(true).fontSize(13);
        chart.container("chartContainer");

        chart.draw();
}</script>'


);
end

我把文件.js放在“HTML Header”

enter image description here

区域来源上的HTML

enter image description here

您可以在此页面中复制您的问题吗?