Oracle Apex 中的动态图表区域 [英] Dynamic Chart Regions in Oracle Apex

问题描述

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

What would be the suggested approach for dynamically create a Chart Region in Apex?

我有一个 Teams 表，对于每个团队 A Chart 区域，在添加团队时应添加仪表图，并在删除团队时删除图表.

I have a Teams table and for each team A Chart region, a gauge chart should be added as you add teams, and chart be removed as you delete a team.

推荐答案

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

The solution I applied is to create a dynamic region.

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

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

I use looping and mod to set an enter at each 4 divs.

结果是这样的:Anychart Gauges 从 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 中的动态图表区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！