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;