Oracle Apex 中的动态图表区域

Question

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

我有一个团队表，对于每个团队一个图表区域，应在添加团队时添加仪表图，在删除团队时删除图表。

Answer 1

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

1. 在页眉中添加anychart库引用。
2. 创建一个用作容器的区域。
3. 创建一个 pl/sql 动态区域，它是上述区域的父级。
4. 使用 htp.p 创建 div。
5. 使用 htp.script 设置 javascript 代码。

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

结果如下： Anychart Gauges dynamically create from 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;