页面提交后图表消失答案

【问题标题】：Chart disappears after page submit页面提交后图表消失
【发布时间】：2018-04-17 08:33:16
【问题描述】：

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

在第一次访问页面时一切正常，但是当我按下通过动态操作提交页面的区域按钮（在另一个静态区域中）时，图表完全消失了（尽管 div 保持跨越其原始大小）。

您知道这种症状背后的原因吗？

！更新！

这个JS函数是由一个页面进程生成的（Pre-rendering/before region）：

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();
}

紧随其后的是位于 body2 位置的静态区域，内容如下：

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

【问题讨论】：

更新：添加了这些 Anychart 库（作为页面/主题级别设置）：anychart.min.js、anychart-ui.min.js、dark_earth.min.js。所有anychart JS对象都在动态脚本中本地声明。
在我看来，Apex/HTML 问题比 AnyChart 更多...
按F12，进入控制台，查看图表消失时是否有错误
Firefox 中的唯一警告如下（无错误）：“主线程上的同步 XMLHttpRequest 已被弃用，因为它对最终用户的体验产生不利影响。”
如果对您来说容易的话，您可以尝试更改图表的创建方式。在该区域中只需放置 html 图表。尝试将 .js 代码放在动态操作上以在页面加载时执行...我不知道为什么会发生这种情况，这只是一个建议。只是通知一下，在我看来，APEX 不再使用 anychart 库。在当前版本（5.1）和更高版本中，我认为他们将使用 oracle-jet 库。 apex.oracle.com/pls/apex/germancommunities/apexcommunity/tipp/…

标签： javascript html oracle-apex-5.1 anychart

【解决方案1】：

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

【讨论】：

谢谢！我将发布一张 Oracle 和 AnyChart 支持以太币的票（附有详细信息）

【解决方案2】：

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

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

在此页面中，我有一个关于“预渲染”>“区域之前”的过程

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”上

以及一个区域源上的HTML

您能否在此页面中复制您的问题？

【讨论】：