javascript - AnyChart APEX5 集成

Question

我正在使用 APEX 5 开发一个网页。我想显示一个 AnyChart 类型，它不包含在 APEX 图表区域选项中，例如面积图或标记图。我有很多想法，但无法实现。有没有人在标准 AnyChart JavaScript API 或 XML 的帮助下成功地在 APEX 页面中显示自定义 AnyCharts？

我尝试使用 XML 和 JavaScript，从页面加载时的动态操作调用。但是我找不到正确的配置，它从来没有用过。如果有人有一个正常运行的 AnyChart 集成的示例，我会很高兴，我想知道在何时何地放置什么。

Answer 1

我们在大多数图表上使用自定义 AnyChart XML。 但是我们将它与应用程序进程一起使用。

HTML代码:

<span id="chartSpan"> </span>

JS代码如下:

对于添加元素(相应地更改路径):

var chart = new AnyGantt('/i422/flashchart/anygantt_4/swf/AnyGantt.swf');

chart.addEventListener('resourceSelect', onResourceSelect);
chart.addEventListener('periodSelect', onPeriodSelect);
chart.addEventListener('periodEditingEnd', onPeriodEdit);

chart.width = "100%";
chart.height = "70%";
chart.write("chartSpan");

加载数据:

apex.server.process ("GEN_XML_AJAXDATA_PROJECT", {
  pageItems: "#P28_PROJECTID",
    x01: $v('P28_PROJECTID'),
    x02: 'another parameter',
  }, {
    dataType: "text"
  , success: function( pData ) { 
  xmlData = pData;
  //flash = AnyGantt._charts.chart__0;      
  flash = chart;

  flash.setXMLDataFromString(xmlData);
// do something 

} );

应用程序进程“GEN_XML_AJAXDATA_PROJECT”(简称):

declare
l_data clob;
l_chart_data_xml varchar2(32767);

l_amt integer := 4000;
l_pos integer := 1;
l_buf varchar2(32000);


begin

sys.htp.htbuf_len := 63;

dbms_lob.createtemporary(l_data, FALSE, dbms_lob.session );
dbms_lob.open(l_data, dbms_lob.lob_readwrite );


--add your xml data code here
l_chart_data_xml := '<anygantt>  <settings>
<navigation enabled="True" position="Top" size="30"> 
</navigation>
<editing allow_edit="true">
  <rounding>
    <date unit="Week" step="1" />
  </rounding>
</editing>';
dbms_lob.writeappend(l_data, length(l_chart_data_xml), l_chart_data_xml);

IF apex_application.g_x02 = 'false' THEN 
End;
    for resrow in (SELECT apex_application.g_x01 AS CSVLINE FROM DUAL) loop
    l_chart_data_xml := resrow.CSVLINE||chr(13)||chr(10);
end loop;

l_chart_data_xml := '</resource_chart>' || chr(10) || '</anygantt>';
dbms_lob.writeappend(l_data, length(l_chart_data_xml), l_chart_data_xml);


loop
    begin
        dbms_lob.read(l_data, l_amt, l_pos, l_buf );
        l_pos := l_pos + l_amt;
        l_amt := 4000;

        sys.htp.prn( l_buf );

        exception
        when no_data_found then
            exit;
    end;
end loop;


dbms_lob.close(l_data);
if l_data is not null then
    dbms_lob.freetemporary(l_data);
end if;

end;

我强烈建议您使用 chrome 开发人员选项来调试您的 ajax 响应。这样您就可以立即解决问题: