Динамические диаграммные области в Oracle Apex

Question

Каким будет предлагаемый подход для динамического создания области диаграммы в Apex?

У меня есть таблица команд и для каждой команды. Область диаграммы должна быть добавлена ​​калибровочная диаграмма при добавлении команд, а диаграмма удаляется при удалении команды.

Answer 1

Решение, которое я применил, заключается в создании динамической области.

1. Добавить ссылку на любую строку в заголовке страницы.
2. Создайте регион, который служит контейнером.
3. Создайте динамическую область pl/sql, ее родительский выше.
4. Используйте htp.p для создания div.
5. Используйте htp.script для настройки кода javascript.

Я использую looping и 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;