前回の記事で、同じくオープンソースのチャート描画ライブラリであるChart.jsをOracle APEXに組み込む方法を紹介しています。それと同じチャートを、ApexChartsで表示してみます。
Chart.jsをOracle APEXに組み込む際に作成したAPEXアプリケーションをコピーし、ApexCharts向けに改変します。
直接ApexChartsで描画
最初にApexChartsを呼び出して、div要素にチャートを描画します。
jsDelivrで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>
テンプレート・コンポーネントの作成
ApexChartsを使ったテンプレート・コンポーネントは、Chart.jsのテンプレート・コンポーネントとほぼ同じ手順で作成します。そのため、設定内容に絞って説明します。
テンプレート・コンポーネントの名前はApexCharts Bar Chartとしました。テンプレートの部分には以下を記述しています。カスタム要素はa-apexcharts-bar-chartですが、属性は今まで作成してきたテンプレート・コンポーネントと同じにしています。
カスタム属性の設定の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の実装を記述します。
ロードするファイルURLのカスケード・スタイルシートに以下を記述します。
#PLUGIN_FILES#css/apexcharts.min.css
JavaScriptに以下を記述します。
#PLUGIN_FILES#js/apexcharts.min.js
#PLUGIN_FILES#js/script#MIN#.js
以上でテンプレート・コンポーネントは完成です。
リージョンにChart.jsのテンプレート・コンポーネントを実装しているページを開きます。
識別の名前をApexCharts、タイプをApexCharts Bar Chartsに変更します。
リージョンの属性を開き、設定のGroupsとしてP2_GROUPS、ValueとしてP2_VALUE、Colorとして#309fdb、Orientationとしてhorizontalを設定します。
対話モード・レポートへの組み込み
対話モード・レポートの列CHARTを選択し、識別のタイプをApexCharts Bar Chartsに変更します。
設定のCSS Classesにw400、Groupsに列GROUPS、Valueに列VALUE、Colorに#309fdb、Orientationにhorizontalを指定します。
以上で実装は完了です。ページを実行すると以下のように表示されます。
今回の記事は以上になります。
作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/integrating-apexcharts.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
