2024年8月20日火曜日

Apache EChartsをOracle APEXのアプリケーションに組み込む

Apache EChartsを、Oracle APEXのアプリケーションに組み込んでみます。

Oracle JETやその他のチャート描画ライブラリの組み込み作業で表示したチャートと、同じチャートを表示してみます。


直接Apache EChartsで描画



Apache EChartsのGet Startedを参考にして、div要素にチャートを描画します。
  
ページ・プロパティのJavaScriptのファイルURLに以下を記述します。

https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js


静的コンテンツのリージョンの名前をApache EChartsとし、ソースのHTMLコードに以下を記述します。

<div id="myChart" class="w600 h400"></div>


チャートに描画するデータを保持するページ・アイテムとしてP1_GROUPS、P1_VALUEを作成します。タイプは非表示です。

ページ・アイテムP1_GROUPSに計算を作成し、ページの描画前にデータを設定します。計算のタイプとしてSQL問合せ(単一の値を返す)を選択し、SQL問合せに以下を記述します。
select
    json_arrayagg(
        ename
    order by empno asc )
from emp where deptno = 10

ページ・アイテムP1_VALUEにも計算を作成し、ページ描画前に値を設定します。SQL問合せに以下を記述します。
select
    json_arrayagg(
        sal
    order by empno asc )
from emp where deptno = 10

チャートを描画するJavaScriptのコードを、ページ・プロパティのページ・ロード時に実行に記述します。

var chart = echarts.init(document.getElementById('myChart'));
var option = {
title: {},
tooltip: {},
legend: {},
xAxis: {},
yAxis: {
data: JSON.parse(apex.items.P1_GROUPS.value)
},
series: [
{
type: 'bar',
data: JSON.parse(apex.items.P1_VALUE.value),
itemStyle: {
color: '#309fdb'
}
}
]
};
chart.setOption(option);
view raw apache-echarts-embed.js hosted with ❤ by GitHub


以上で実装は完了です。ページを実行すると以下のように表示されます。



テンプレート・コンポーネントの作成



Apache EChartsのバー・チャートを描画するテンプレート・コンポーネントについて、設定内容を説明します。

テンプレート・コンポーネントの名前はApache ECharts Bar Chartとしました。テンプレートの部分には以下を記述しています。

<div class="#CSS_CLASSES#">
<a-echarts-js-bar-chart id="#APEX$DOM_ID#" groups="#GROUPS#" value="#VALUE#" color="#COLOR#" orientation="#ORIENTATION#" width="#WIDTH#" height="#HEIGHT#"></a-echarts-js-bar-chart>
</div>
view raw part-tc-apache-echarts.html hosted with ❤ by GitHub


カスタム属性としてCSS Classes、Groups、Value、Color、Orientation、Width、Heightを作成しています。GroupsとValueのタイプはセッション・ステート値、Colorはテキスト、WidthとHeightは両方とも整数です。


チャートの向きの指定であるOrientationの静的LOVは、horizontalの戻り値としてhorizontal、verticalの戻り値としてverticalを設定します。


ディレクトリをjs、ファイル名をscript.jsとして、カスタム要素a-echarts-js-bar-chartの実装を記述します。

(function (debug) {
"use strict";
class EChartsBarChart extends HTMLElement {
chart;
chartId;
constructor() {
super();
this.chartId = new Date().getTime();
debug.info("%s, constructor", this.chartId);
}
connectedCallback() {
debug.info("%s, %s, connectedCallback, %s", this.chartId, new Date().getTime(), this.isConnected);
if (this.isConnected) {
/* append div for chart */
const div = document.createElement("div");
this.appendChild(div);
/* define size of chart container, both width and height are configured as required. */
let size = {
width: this.getAttribute("width"),
height: this.getAttribute("height")
};
/* configuration for Apache ECharts */
let option = {
title: {},
tooltip: {},
legend: {},
xAxis: {},
yAxis: {},
series: [
{
type: 'bar',
data: JSON.parse(this.getAttribute("value")),
itemStyle: {
color: this.getAttribute("color")
}
}
]
};
const orientation = this.getAttribute("orientation");
if ( orientation === null || orientation === "horizontal" ) {
option.yAxis.data = JSON.parse(this.getAttribute("groups"))
}
else
{
option.xAxis.data = JSON.parse(this.getAttribute("groups"))
};
/* draw chart */
debug.info(option);
let chart = echarts.init(div, null, size);
chart.setOption(option);
this.chart = chart;
}
}
disconnectedCallback() {
debug.info("%s, %s, disconnectedCallback", this.chartId, new Date().getTime());
if (this.firstChild) {
this.removeChild(this.firstChild);
}
}
}
document.addEventListener('DOMContentLoaded', () => {
if ( window.customElements.get("a-echarts-js-bar-chart") === undefined ) {
debug.info("define custom element");
window.customElements.define("a-echarts-js-bar-chart", EChartsBarChart);
};
});
})(apex.debug);
view raw script.js hosted with ❤ by GitHub
ロードするファイルURLのJavaScriptに以下を記述します。

https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js
#PLUGIN_FILES#js/script#MIN#.js


以上でテンプレート・コンポーネントは完成です。

リージョンにApache EChartsのテンプレート・コンポーネントを実装します。

ページ・アイテムP2_GROUPSとP2_VALUEは、最初に作成したP1_GROUPSとP1_VALUEと同じ設定で作成します。

識別の名前をApache ECharts、タイプをApache ECharts Bar Chartとします。


リージョンの属性を開き、GroupsとしてP2_GROUPS、ValueとしてP2_VALUE、Colorとして#309fdb、Orientationとしてhorizontalを設定します。Widthは600、Heightは400とします。


以上で実装は完了です。ページを実行すると以下のように表示されます。



対話モード・レポートへの組み込み



対話モード・レポートのソースのSQL問合せとして以下を記述します。
select
    dname,
    json_arrayagg(
        ename
    order by empno asc ) groups,
    json_arrayagg(
        sal
    order by empno asc) value,
    '' chart
from emp_dept_v group by dname

対話モード・レポートの列CHARTを選択し、識別のタイプをApache ECharts Bar Chartに変更します。

設定のCSS Classesにw400、GroupsにGROUPS、ValueにVALUE、Colorに#309fdb、Orientationにhorizontalを設定します。Widthは400、Heightに300を設定します。


以上で実装は完了です。ページを実行すると以下のように表示されます。


今回の記事は以上になります。

作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/integrating-apache-echarts.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完
投稿者 時刻:
ラベル: ,