日日是Oracle APEX: ApexChartsをOracle APEXのアプリケーションに組み込む

2024年8月13日火曜日

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

オープンソースのチャート描画ライブラリであるApexChartsを、Oracle APEXのアプリケーションに組み込んでみます。ApexChartsの使い方自体には、ほとんど触れません。

前回の記事で、同じくオープンソースのチャート描画ライブラリであるChart.jsをOracle APEXに組み込む方法を紹介しています。それと同じチャートを、ApexChartsで表示してみます。

Chart.jsをOracle APEXに組み込む際に作成したAPEXアプリケーションをコピーし、ApexCharts向けに改変します。

直接ApexChartsで描画

最初にApexChartsを呼び出して、div要素にチャートを描画します。

jsDelivrでApexChartsを検索し、ページに組み込むスクリプトを選択します。

https://www.jsdelivr.com/package/npm/apexcharts

TypeはDefault、VersionはLatest Majorを選び、JavaScriptとCSSそれぞれについてCopy URLを実行します。以下のURLがクリップボードにコピーされます。

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

https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.min.css

これらのURLを、ページ・プロパティのJavaScriptのファイルURLとCSSのファイルURLに記述します。

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

<div id="myChart"></div>

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

	var options = {
	chart: {
	type: 'bar'
	},
	plotOptions: {
	bar: {
	horizontal: true
	}
	},
	series: [{
	color: "#309fdb",
	data: JSON.parse(apex.items.P1_VALUE.value)
	}],
	xaxis: {
	categories: JSON.parse(apex.items.P1_GROUPS.value)
	}
	}

	var chart = new ApexCharts(document.querySelector("#myChart"), options);

	chart.render();

view raw apexcharts-embed.js hosted with ❤ by GitHub

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

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

ApexChartsを使ったテンプレート・コンポーネントは、Chart.jsのテンプレート・コンポーネントとほぼ同じ手順で作成します。そのため、設定内容に絞って説明します。

テンプレート・コンポーネントの名前はApexCharts Bar Chartとしました。テンプレートの部分には以下を記述しています。カスタム要素はa-apexcharts-bar-chartですが、属性は今まで作成してきたテンプレート・コンポーネントと同じにしています。

	<div class="#CSS_CLASSES#">
	<a-apexcharts-bar-chart id="#APEX$DOM_ID#" groups="#GROUPS#" value="#VALUE#" color="#COLOR#" orientation="#ORIENTATION#"></a-apexcharts-bar-chart>
	</div>

view raw part-tc-bar-chart-apexcharts.html hosted with ❤ by GitHub

カスタム属性の設定のOrientationは、plotOptionsのbarの属性horizontalに与える真偽値になります。静的LOVのhorizontalの戻り値はtrue、verticalの戻り値はfalseとします。

テンプレート・コンポーネントのファイルとして、ApexChartsの実体となるapexcharts.min.jsとapexcharts.min.cssをアップロードします。JavaScriptのディレクトリはjs、CSSのディレクトリはcssとします。

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

	(function (debug) {
	"use strict";

	class ApexChartsBarChart 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 as a first Child */
	const div = document.createElement("div");
	this.appendChild(div);

	/* options for ApexCharts */
	let options = {
	chart: {
	type: 'bar'
	},
	plotOptions: {
	bar: {
	horizontal: JSON.parse(this.getAttribute("orientation"))
	}
	},
	series: [{
	color: this.getAttribute("color"),
	data: JSON.parse(this.getAttribute("value"))
	}],
	xaxis: {
	categories: JSON.parse(this.getAttribute("groups"))
	}
	};

	/* draw chart */
	debug.info(options);
	let chart = new ApexCharts(div, options);
	chart.render();
	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-apexcharts-bar-chart") === undefined ) {
	debug.info("define custom element");
	window.customElements.define("a-apexcharts-bar-chart", ApexChartsBarChart);
	};
	});

	})(apex.debug);