はじめに
概要
BIツールであるYellowfinは、JavaScriptライブラリを利用することで標準機能以外の様々なグラフや図を表現することが可能です。
今回はHighchartsを利用し、ワードクラウドを描画してみます。
ワードクラウドとは
各文字列に紐づけられた数値の重みに応じて文字の大小を表現した図です。
例えば、「文章を単語レベルに分解した上で出現頻度を重み付けし、出現頻度が高い単語を大きく表示する」ケース等で利用されます。
バージョン情報
Yellowfin：9.7.0.3
Highcharts：10.2.0
事前準備
1. YellowfinのJavaScriptグラフ機能を有効化
下記ページの手順を参考に、YellowfinのJavaScriptグラフ機能を有効化します。
2. ライブラリのインストールと配置
-
npmでHighchartsのパッケージをインストールします。
npm install --save highcharts -
Yellowfinサーバーの下記ディレクトリ配下にインストールしたパッケージを配置します。
{Yellowfinインストールディレクトリ}/appserver/webapps/ROOT/js/chartingLibraries/highcharts
下記両条件を満たす場合、本手順は省略可能です。
・Yellowfinサーバーがインターネットにアクセス可能
・CDNでライブラリを参照する
レポートの作成
1. ビュー選択
新規レポートの作成時、デフォルトで選択可能なサンプルビューの「Ski Team」を選択します。
2. カラム設定
「Camp Name」および「Cost of Camp」をカラムとして設定します。
3. グラフ画面へ遷移
画面上部メニューの「グラフ」（①）、画面右のJSボタン（②）、「グラフの選択」領域内の「JS」（③）を順に選択し、JavaScriptタブ画面を表示させます。
4. グラフの設定
「JavaScript」タブにデフォルトで入力されているテンプレートを全て削除し、下記コードに置き換えます（コードの処理内容の詳細については後述）。
「CSS」タブについては、Highcharts公式のWordCloudサンプルのCSSと同様に設定します。
//generateChart は必須の関数であり、Javascriptグラフの作成において呼び出しされます
generateChart = function (options) {
// グラフを描画する部分です
var $chartDrawDiv = $(options.divSelector);
// 必要に応じて、RAWデータJSONをグラフに必要な形式に変換します。
var processedData = processData(options.dataset.data);
// グラフの実績の描画を $chartDrawDiv に行います。
doDrawing(processedData, $chartDrawDiv);
},
processData = function (dataset) {
var processedData = [];
var arrlength = dataset.cost_of_camp.length;
for (let i = 0; i < arrlength; i++) {
// 各カラムの生データを行ごとに連想配列に格納
var obj = {
name: dataset.camp_name[i].raw_data,
weight: dataset.cost_of_camp[i].raw_data
};
processedData.push(obj);
}
return processedData;
},
doDrawing = function (data, $chartDiv) {
// Tell RequireJS how and where to search for the highcharts package
require.config({
packages: [{
name: 'highcharts',
main: 'highcharts'
}],
paths: {
'highcharts': 'js/chartingLibraries/highcharts'
}
});
require([
'highcharts',
'highcharts/modules/wordcloud',
'highcharts/modules/exporting',
'highcharts/modules/export-data',
'highcharts/modules/accessibility'
], function (Highcharts) {
Highcharts.chart($chartDiv[0].id, {
accessibility: {
screenReaderSection: {
beforeChartFormat: '<h5>{chartTitle}</h5>' +
'<div>{chartSubtitle}</div>' +
'<div>{chartLongdesc}</div>' +
'<div>{viewTableButton}</div>'
}
},
series: [{
type: 'wordcloud',
data,
name: 'Occurrences'
}],
title: {
text: 'Total Cost by Camp Location'
},
subtitle: {
text: 'Ski Team Cost'
},
tooltip: {
headerFormat: '<span style="font-size: 16px"><b>{point.key}</b></span><br>'
}
});
});
};
5. グラフ描画結果
各種設定後、プレビュー画面にてワードクラウドが表示されることを確認します。
6. コードの説明
generateChart
コメント記載の通り、メインの処理を行う関数です。下記3点の処理を行っています。
①グラフの描画箇所の設定
②データ加工関数の呼び出し
③グラフ描画の実行
//generateChart は必須の関数であり、Javascriptグラフの作成において呼び出しされます
generateChart = function (options) {
// グラフを描画する部分です
var $chartDrawDiv = $(options.divSelector);
// 必要に応じて、RAWデータJSONをグラフに必要な形式に変換します。
var processedData = processData(options.dataset.data);
// グラフの実績の描画を $chartDrawDiv に行います。
doDrawing(processedData, $chartDrawDiv);
},
processData
表データを加工する関数です。
サンプルコードに倣い、nameに項目名、weightに数値を格納した連想配列を作成します。
processData = function (dataset) {
var processedData = [];
var arrlength = dataset.cost_of_camp.length;
for (let i = 0; i < arrlength; i++) {
// 各カラムの生データを行ごとに連想配列に格納
var obj = {
name: dataset.camp_name[i].raw_data,
weight: dataset.cost_of_camp[i].raw_data
};
processedData.push(obj);
}
return processedData;
},
doDrawing
グラフ描画を行う関数です。
例によってサンプルコードに倣い、requireで必要なjsファイルを参照し、適切なtltleとsubtitleを設定します。
doDrawing = function (data, $chartDiv) {
// Tell RequireJS how and where to search for the highcharts package
require.config({
packages: [{
name: 'highcharts',
main: 'highcharts'
}],
paths: {
'highcharts': 'js/chartingLibraries/highcharts'
}
});
require([
'highcharts',
'highcharts/modules/wordcloud',
'highcharts/modules/exporting',
'highcharts/modules/export-data',
'highcharts/modules/accessibility'
], function (Highcharts) {
Highcharts.chart($chartDiv[0].id, {
accessibility: {
screenReaderSection: {
beforeChartFormat: '<h5>{chartTitle}</h5>' +
'<div>{chartSubtitle}</div>' +
'<div>{chartLongdesc}</div>' +
'<div>{viewTableButton}</div>'
}
},
series: [{
type: 'wordcloud',
data,
name: 'Occurrences'
}],
title: {
text: 'Total Cost by Camp Location'
},
subtitle: {
text: 'Ski Team Cost'
},
tooltip: {
headerFormat: '<span style="font-size: 16px"><b>{point.key}</b></span><br>'
}
});
});
};
まとめ
今回はワードクラウドを描画しましたが、Highchartsのその他様々な種類のグラフも（グラフごとのサンプルを参考に）ほぼ同様の手順で描画できるかと思います。
また、他のJavaScriptライブラリを使用する場合でも、requireでのjsファイルの参照の仕方などが参考になれば幸いです。
参考記事