Oracle Apex 中的动态图表区域

本文介绍了Oracle Apex 中的动态图表区域的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

在 Apex 中动态创建图表区域的建议方法是什么?

What would be the suggested approach for dynamically create a Chart Region in Apex?

我有一个 Teams 表，对于每个团队 A Chart 区域，在添加团队时应添加仪表图，并在删除团队时删除图表.

I have a Teams table and for each team A Chart region, a gauge chart should be added as you add teams, and chart be removed as you delete a team.

推荐答案

我应用的解决方案是创建一个动态区域.

The solution I applied is to create a dynamic region.

在页眉中添加 anychart 库引用.

创建一个用作容器的区域.

创建一个 pl/sql 动态区域，它是上述区域的父级.

使用 htp.p 创建 div.

使用 htp.script 设置 javascript 代码.

我使用循环和 mod 在每 4 个 div 设置一个输入.

I use looping and mod to set an enter at each 4 divs.

结果是这样的:Anychart Gauges 从 Loop、htp.p、htp.script 动态创建

代码是这样的:

declare type v_valor is table of number index by binary_integer; t_valor v_valor; v_index binary_integer; val number; enter varchar2(5); begin enter :=''; t_valor(1) := 100; t_valor(2) := 150; t_valor(3) := 124; t_valor(4) := 159; t_valor(5) := 100; t_valor(6) := 150; t_valor(7) := 124; t_valor(8) := 159; v_index := t_valor.first; val := 0; ancho := (1/t_valor.last)*100; for i in 1..t_valor.last loop val := t_valor(v_index); if mod(i,5)=0 then enter := '</br>'; end if; htp.p(''||enter||'<div id="anychart'||i||'" style="width: 330px; height: 330px; float: left; ">'); enter :=''; htp.script(' anychart.onDocumentReady(function() { // create data set on our data var dataSet = anychart.data.set(['||val||',500]); // chart type var gauge = anychart.circularGauge(); // set series padding gauge.data(dataSet).padding("4%"); //axis settings var axis = gauge.axis() .radius(95) .width(2); //scale settings axis.scale() .minimum(0) .maximum(590) .ticks({interval: 73.75}) .minorTicks({interval: 18.4375}); //ticks settings axis.ticks() .enabled(true) .type(''trapezoid'') .length(8); //minor ticks settings axis.minorTicks() .enabled(true) .length("2"); // second axis settings var axis_1 = gauge.axis(1) .radius(60) .width(3); // second scale settings axis_1.scale() .minimum(0) .maximum(600) .ticks({interval: 100}) .minorTicks({interval: 20}); // second ticks settings axis_1.ticks() .type("trapezoid") .length(8); // second minor ticks settings axis_1.minorTicks() .enabled(true) .length("3"); //needle gauge.needle(0) .enabled(true) .startRadius(''-5%'') .endRadius(''80%'') .middleRadius(0) .startWidth(''0.1%'') .endWidth(''0.1%'') .middleWidth(''5%''); // marker gauge.marker(0) .axisIndex(1) .dataIndex(1) .size(7) .type("triangledown") .position("outside") .radius(60); // bar gauge.bar(0) .axisIndex(1) .position("i") .dataIndex(1) .width(3) .radius(60) .zIndex(10); //gauge label gauge.label() .text(''ALBANY'') .anchor(''center'') //set the position of the label .adjustFontSize(true) .hAlign(''center'') .offsetY(''15%'') .offsetX(''50%'') .width(''40%'') .height(''5%'') .zIndex(10); // draw chart gauge.container("anychart'||i||'").draw(); });'); htp.p('</div>'); v_index := t_valor.next(v_index); end loop; end;