Oracle-Apex中的动态图表区域

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

---

我有一个团队表，每个团队都有一个图表区域，添加团队时应添加一个量表图表，删除团队时应删除该图表。

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

在页眉中添加anychart库引用

创建用作容器的区域

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

使用htp.p创建div

使用htp.script设置javascript代码

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

结果如下：

代码如下所示：

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;

声明
v_valor类型是由二进制_整数组成的数字索引表；
t_valor v_valor；
v_指数二进制_整数；
val数；
输入varchar2（5）；
开始
输入：=''；
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_指数：=t_valor.first；
val:=0；
主播：=（最后一个镜头）*100；
对于1..t\u valor.last循环中的i
val:=t_值（v_指数）；
如果mod（i，5）=0，则输入：='
'；如果结束；
htp.p（“| |输入| |”）；
输入：=''；
脚本（'
anychart.onDocumentReady（函数（）{
//在我们的数据上创建数据集
var dataSet=anychart.data.set（['| | val | |'，500]）；
//图表类型
var gauge=anychart.circularGauge（）；
//设置系列填充
仪表数据（数据集）。填充（“4%”；
//轴设置
var轴=仪表轴（）
.半径（95）
.宽度（2）；
//比例设置
轴刻度（）
.最低（0）
.最高（590）
.ticks（{间隔：73.75}）
.minorTicks（{间隔：18.4375}）；
//滴答声设置
axis.ticks（）
.已启用（真）
.类型（“梯形”）
.长度（8）；
//小刻度设置
axis.minorTicks（）
.已启用（真）
.长度（“2”）；
//第二轴设置
var轴_1=仪表轴（1）
.半径（60）
.宽度（3）；
//第二音阶设置
轴_1.刻度（）
.最低（0）
.最高限额（600）
.ticks（{interval:100}）
.minorTicks（{间隔：20}）；
//第二滴答声设置
轴_1.刻度（）
.类型（“梯形”）
.长度（8）；
//第二副刻度设置
轴_1.minorTicks（）
.已启用（真）
.长度（“3”）；
//针头
仪表指针（0）
.已启用（真）
.startRadius（''-5%''）
.端部半径（“80%”）
.middleRadius（0）
.startWidth（'0.1%''）
.端宽（“0.1%”）
.中间宽度（“5%”）；
//标记
量规标记（0）
.axisIndex（1）
.数据索引（1）
.尺寸（7）
.类型（“三角形下降”）
.职位（“外部”）
.半径（60）；
//酒吧
标准杆（0）
.axisIndex（1）
.职位（“i”）
.数据索引（1）
.宽度（3）
.半径（60）
.zIndex（10）；
//仪表标签
gauge.label（）
.文本（“奥尔巴尼”）
.anchor（“中心”）//设置标签的位置
.adjustFontSize（真）
.hAlign（“中心”）
.offsetY（'15%''）
.抵销（'50%''）
.宽度（“40%”）
.高度（'5%''）
.zIndex（10）；
//绘制图表
gauge.container（“anychart'| | i | |'”）.draw（）；
});');
htp.p（“”）；
v_指数：=t_值。下一个（v_指数）；
端环；
结束；

您能分享一下您到目前为止尝试过的代码吗？我在处理要显示的数据时刚刚添加了一个静态图表区域，当然后来我意识到必须根据团队表中现有的每个团队自动添加一个图表。我在考虑pl sql动态内容，但我不确定图表区域上是否有xml。。。