Question

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

我有一个Teams表，每个团队一个Chart区域，在添加团队时应添加一个计量表，并在删除团队时删除图表。

Answer 1

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

在页眉中添加anychart库引用。
创建一个充当容器的区域。
创建一个pl / sql动态区域，它是上面的父项。
使用htp.p创建div。
使用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;

Oracle Apex中的动态图表区域

1 个答案: