この記事では、Chart.jsというグラフ描画専用のJavaScriptライブラリを用いて、棒グラフと折れ線グラフを同一グラフ上に描画するコンビネーションチャートを描く方法について解説します。
普段、JavaScriptにあまり馴染みのないFileMaker開発者にとっては少しハードルが高く感じるかもしれません。
しかしご安心下さい。
Chart.jsは、いちど「型」を覚えてしまえばそれほどコードを書くことは難しくないですし、一度HTMLとJavaScriptの雛形を作ってしまえば、どんなチャートでも驚くほど簡単にFileMakerから利用することができます。
1.HTMLのひな形をつくる
Chart.jsはJavaScriptライブラリなので、グラフはWebビューア上に表示します。そしてWebビューアにコンテンツを表示するためにはHTMLが必要ですね。まずはその下地となるHTMLのひな形を作成していきましょう。
HTMLを効率的に書くには、AtomやVisualStudioCode等の専用エディタがあることが望ましいですが、もし手元になければ普段利用されているテキストエディタでもOKです。
1-1.HTMLのひな形
まずは次のHTMLを用意します。もしお時間があれば、HTMLの学習も兼ねて実際にタイプして見てみてください。お時間の無い場合は、コチラのコードをそのままエディタにコピー＆ペーストしていただいてOKです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
</head>
<body>
</body>
</html>5行目に記述されているのが、今回の主役であるChart.jsのライブラリです。今回はさくっと手軽に始められるCDNサイトのライブリを利用します。
1-2. カラー配列変数
次に、グラフに描画する各要素の色を定義する以下のようなJavaScriptの配列変数を追加します。こちらはhead要素内に追加しておくと良いでしょう。
window.chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
こちらのRGB値を変更することにより、自分の好みの色をつくることができます。FileMakerの標準機能として用意されているグラフでは、色をテーマとして選択することはできますが、Chart.jsでは、より詳細なカラー設定が可能です。
1-3.グラフ描画領域の設定
次にグラフの描画領域を設定します。こちらはbodyタグ内に以下のようなコードを記述します。
<body style='border:0;padding:0;margin:0;overflow:hidden;'>
<div id="container">
<canvas id="canvas" height="520" width="740"></canvas>
</div>
</body>bodyタグ内には、余計な線やスクロールバーを表示させたくないので、幾つかのスタイル属性値を記述しています。特にWindows環境ではWebビューア内に意図しない線やスクロールバーが表示されてしまうことがあります。しかし、こちらのスタイル要素を記述することでこれらを非表示にすることができます。
そして実際にグラフが描画される領域はcanvasタグの部分になります。このタグ内には、同タグを識別するためのid属性、そして描画領域の高さと幅を定義するheight属性とwidth属性が設定されています。この属性値を調整することで、収まりの良いグラフを描画することができます。（※但しこの値を忠実に再現するには、後に説明するOption設定のresponsiveプロパティをfalseに設定する必要があります。）
ここまでで、ひな形となるHTMLの準備が整いました。記述したHTMLファイルは、任意の場所にMyFirstChart.html等の名前で保存しておくと良いでしょう。
2.JavaScriptを記述する
次に、先程作成したMyFirstChart.html内にJavaScriptを記述していきます。今回は、以下のような棒グラフと折れ線グラフのコンビネーションチャート（ComboChart）の描画を題材にすすめていきます。
JavaScriptで記述する内容は「1.描画対象データ」「2.描画オプション」「3.描画の実行」の３つになります。それでは順を追って説明していきましょう。
2-1.描画対象データの宣言
まず最初に、グラフに描画するデータをJSONで定義します。具体的なコードはこのような感じになります。
var color = Chart.helpers.color;
var comboChartData = {
labels: [ "1月","2月","3月","4月","5月","6月" ],
datasets: [{
yAxisID: "y-axis-0",
type: 'bar',
label: 'Dataset1',
backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
borderColor: window.chartColors.green,
borderWidth: 1,
data: [ 47590,50132,33086,35630,42520,39691 ]
}, {
yAxisID: "y-axis-0",
type: 'bar',
label: 'Dataset2',
backgroundColor: color(window.chartColors.purple).alpha(0.5).rgbString(),
borderColor: window.chartColors.purple,
borderWidth: 1,
data: [ 46787,43156,55259,48677,36416,47340 ]
}, {
yAxisID: "y-axis-1",
type: 'line',
label: 'Dataset3',
backgroundColor: color(window.chartColors.orange).alpha(0.5).rgbString(),
borderColor: window.chartColors.orange,
borderWidth: 2,
fill: false,
data: [ 97,88,92,86,99,88]
}]
};一見複雑そうに見えますが、実はそれほど複雑ではありません。このコードは、colorとcomboChartDataのたった２つのオブジェクト変数が宣言されているだけです。
オブジェクト変数：color
Chart.jsに用意されているChart.helpers.colorクラスをオブジェクトとしてインスタンス化しているだけですね。（書いている意味がわからなければ、ひとまず「Chart.jsが用意している色設定を簡単に使うための呪文」としてとらえていただければOKです。）
オブジェクト変数：comboChartData
FileMakerでも最近おなじみになってきたJSONを使って、具体的に描画するデータを宣言しています。まず３行目のlabelsキーには、１月〜６月の文字列を配列として宣言しています。これがグラフのX軸のラベルになります。次にdatasetsキーがJSON配列として宣言され、上記のコードには３つの要素が配列内に設定されています。まずひとつ目の要素のみを抜き出したのかこちらです。
{
yAxisID: "y-axis-0",
type: 'bar',
label: 'Dataset1',
backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
borderColor: window.chartColors.green,
borderWidth: 1,
data: [ 47590,50132,33086,35630,42520,39691 ]
}これだけであれば、FileMakerのバージョン16から提供されたJSONSetElementという関数を使って簡単に表現できそうですよね。そして記述されている要素も、ひとつひとつ解説していけば、それほど難しいものではありません。
2行目： yAxisID: ‘y-axis-0’
Y軸のひとつ目（左側）の目盛りに準ずるデータという事を現しています。今回は棒グラフと折れ線グラフのコンビネーションとなるので、多くの場合２つのY軸が必要になります。例えば左側の軸は金額、右側の軸は百分率といった目盛りを取ります。
3行目：type: ‘bar’
描画するグラフのタイプです。barなので棒グラフを現しています。そして３つ目のデータセット要素には、この部分がtype: 'line'となっているので、折れ線グラフに対応していることがわかると思います。
4行目：label: ‘Dataset1’
グラフ内の凡例に表示する文字列です。もちろん日本語を記述することも可能です。
5行目：backgroundColor : color(window.chartColors.green).alpha(0.5).rgbstring()
先頭でオブジェクト変数として宣言した Chart.helpers.color のメソッドを使ってデータセットで記述する棒グラフの背景色を設定しています。宣言しているgreenのrgb値は、ヘッド要素内に書いたwindow.chartColorsで定義されています。なので、この値を微調整することで、好みの色を出すことができます。そしてalpha(0.5)は、背景色を50%透過で表示することを示しています。こうすることで、補助線の視認性が上がるとともに、モダンで柔らかな見た目のグラフを描くことができます。
6行目：borderColor:window.chartColors.green
棒グラフの境界線の色を設定しています。背景色と同じくgreenですが、透過設定がされていません。
7行目：borderWidth: 1
棒グラフの境界線の幅（太さ）を設定しています。
8行目：data:[ nnn, nnn, nnn…]
グラフに描画する数値データを配列で設定しています。例えば該当データセットに６ヶ月分の売上金額を表示したい場合は、ここに6ヶ月分の売上金額を記述します。
以上が、【Datasets】要素内に記述されている各データセットの詳細です。今回題材として使うコンビネーションチャートには、棒グラフが２つに折れ線グラフが１つの合計３つのデータセットが宣言されています。
データセットの３つ目は折れ線グラフを描画するための設定となります。棒グラフとは若干異なりますが、内容的にはほぼ同じです。ぜひご自身で解読してみてください。
2-2.グラフオプションの設定
次にグラフオプションの設定をchartOptions変数に記述します。記述するコードの全体像はこのような感じになります。
var chartOptions = {
type: 'bar',
data: comboChartData,
options: {
scales: {
yAxes: [
{
id: "y-axis-0",
position: "left",
ticks: {
min : 0,
max : 60000,
stepSize: 10000,
fontSize: 12
}
}, {
id: "y-axis-1",
type: "linear",
position: "right",
ticks: {
min : 60,
max : 100,
stepSize: 10,
fontSize: 12
}
}],
xAxes: [{
ticks: {
fontSize: 12
}
}]
},
responsive: false,
legend: {
position: 'top',
labels: {
fontSize: 12
}
},
title: {
display: true,
text: 'My First Combo Chart',
fontSize: 18
},
tooltips: {
titleFontSize: 12,
bodyFontSize: 12
}
}
};少し長いですが、こちらも中身は各グラフの設定情報をJSONで記述しているだけなので、それほど複雑なものではありません。こちらは主要な部分のみ解説をしたいと思います。
5行目：scales配列
X軸とY軸に関連するオプションをこの中に記述します。上記の例では、yAxes（6行目）とxAxes（24行目）という２つの配列要素名で、それぞれY軸とX軸の描画に必要なオプションが設定されています。
そしてyAxesも配列要素となっており、この中には２つのY軸の定義が記述されています。ひとつがy-axis-0、もうひとつがy-axis-1です。さらに設定を読み込んでいくと、y-axis-0はY軸の左側（ position: "``left``"）、そしてy-axis-1はY軸の右側。そしてY軸左側のy-axis-0の最小値はゼロ、フォントサイズは12ポイント、Y軸左側のy-axis-0の最小値は60で同じくフォントポイントが12ポイントであると宣言されています。
37行目：title要素
グラフのタイトルを設定しています。text要素に、具体的なタイトルの文字列を記述します。もちろん日本語でもOKです。またDisplay要素をfalseにすることで、タイトルを非表示にすることもできます。
42行目：tooltips要素
Chart.jsは、グラフにマウスオーバするとツールチップをデフォルトで表示してくれます。この表示設定をこのtooltips要素内で記述します。
2-3.描画の実行
そしてこれが最後のステップです。実際にグラフを描画するコードを記述していきます。っと言っても、Chart.jsが用意しているメソッドをひとつキックするだけなので、記述そのものはとても簡単です。
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myComboChart = new Chart( ctx, chartOptions );
};こちらが実際のコードです。とても短いですよね。
意味的には、「HTMLが全て読み込まれたら、canvasというidで宣言されたcanvasタグの内部に、Chart.jsのChartメソッドを使ってグラフを書いてね。グラフの描画に必要な情報はchartOptionsという変数に記述しているのでそちらを参照…」っといったところでしょうか。
ここまで、描画対象データの宣言と、グラフを記述するに当たってのオプション、そして実際にグラフを描画するコードをJavaScriptで記述してきました。これらのコードは、先に用意したHTMLのdivタグのあとにscriptタグで囲って記述して下さい。
こちらを保存してブラウザで開くと、こちらのようなチャートが描画できるはずです。
いかがでしょうか、正しく描画されましたか…？
もし但しく表示されない場合は、コードのどこかに記述ミスがあるはずです。コピペでも構いませんが、できれば時間をとって、ひとつひとつタイプしたほうが学習効果が上がると思います。
3.FileMakerに組み込む
それではFileMakerに組み込むステップに入りましょう。実際の開発でも、今回のように一度ブラウザで確実に描画できるHTMLを用意してからFileMakerへ組み込むという手順を踏むほうがスムーズに作業が進められます。
今回、エクササイズとして作成するソリューションはこのような感じのものです。
レイアウト右側に配置しているフィールド値を修正することで、左側に描画しているグラフの内容が動的に変化するという動きになります。また、グラフに描画する３つのデータセットの値は、FileMakerのスクリプトとカスタム関数を使って、ランダムに値を生成する機能も追加します。
3-1.ソリューションファイルの準備とテーブル設定
それではまず、FileMakerで新規ソリューションを作成しましょう。ファイル名はChartJS.fmp12等としておくと良いでしょう。
次に、データベースの定義を開きます。既にChartJSというテーブルが作成されているはずなので、次のような21個のフィールドを作成して下さい。（※幾つか繰り返しフィールド設定がされているフィールドもあるのでご注意下さい。）
また、テキストフィールドの計算値自動入力には全てTextFormatRemove ( Self )の計算式を設定しています。
3-2.レイアウトの作成
テーブル設定が全て完了したら、早速グラフを描画するレイアウトを作成していきましょう。レイアウトはあなたの好みで自由に作ってもOKですし、先のスクリーンショットを例に作っていただいてもOKです。
3-3.HTMLテンプレートの編集
次に、先に作成したHTMLファイルを編集して、各種値を動的に編集できる形にしましょう。
動的に変更したい部分をだいたい文字列に置き換える。
今回、動的に変更したいグラフの要素は次の通りです。
- グラフタイトルとタイトルのフォントポイント
- Y軸の目盛りに対するキャプション、及び最小値・最大値
- 凡例（Legend）の表示場所
- グラフ描画領域の高さと幅
- X軸のラベル値
- ３つのデータセットのラベルと、グラフに描画する値
これらの部分を制御しているHTMLの記述箇所を、全て代替文字列に変更します。今回は代替文字列を@@@hogehoge@@@と言った感じで、代替文字列を3つのアットマークで挟む形を取ります。
実際に書き換えるとこのような形になります。
<body style='border:0;padding:0;margin:0;overflow:hidden;'>
<div id="container">
<canvas id="canvas" height="@@@CANVAS_HEIGHT@@@" width="@@@CANVAS_WIDTH@@@"></canvas>
</div>
</body>こちらはdatasetsの書き換え結果です。
var comboChartData = {
labels: [ @@@LABELS@@@ ],
datasets: [
// --- Dataset1 ---
{
yAxisID: "y-axis-0",
type: 'bar',
label: '@@@DATASET1_LABEL@@@',
backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
borderColor: window.chartColors.green,
borderWidth: 1,
data: [ @@@DATASET1_DATA@@@ ]
}このように、動的に書き換えたいHTMLの記述箇所を特定の代替文字列に置き換えていきます。元はブラウザで確実にグラフの描画ができていたHTMLを編集していくので、慎重に作業を進めれば、必ず動的なグラフ描画のひな形が作成できるはずです。
3-2.グラフを描画するスクリプトの作成
次に、スクリプトを作成します。スクリプト名は「DrawChart」等が良いでしょう。今回作成するスクリプトは次の通りです。
4行目：テキストを挿入
$HTML_Template変数に、先に代替文字列を記述したHTMLファイルをセットします。「変数を設定」スクリプトステップではなく「テキストを挿入」スクリプトステップを使っているのは、ダブルクォーテーションのエスケープ等の煩わしい文字列処理の必要性が無いからです。Ver16より、テキストを挿入スクリプトステップは、変数への値設定が可能となり、俄然使い勝手が増しました。
6行目：変数を設定
繰り返しフィールドになっているLabelsフィールドの値を、$labels変数にセットしています。セットする際には、繰り返しフィールドの値が、”1月”,”2月”,”3月”…のように、カンマ区切り、そして各値がダブルクォーテーションで囲まれた形に編集します。具体的な計算式は以下のとおりです。
Let([
~list = List ( ChartJS::Labels ) ;
~str = Substitute ( ~list ; ¶ ; Char(34) & "," & Char(34) )
];
Char(34) & ~str & Char(34)
)7〜９行目：変数を設定
同じく繰り返しフィールドになっているDataset1_Data〜Dataset3_Dataのフィールド値を、$Dataset1_Data〜$Dataset3_Data変数にセットしています。セットする際には、繰り返しフィールドの値が、カンマ区切りでセットされるように編集します。具体的な計算式は以下のとおりです。
Let(
~list = List ( ChartJS::Dataset1_Data );
Substitute ( ~list ; ¶ ; "," )
)11行目：変数を設定
4行目で$HTML_TemplateにセットしたHTMLの代替文字列を、実際にグラフを描画する値にSubstituteします。Substituteした値は$$Chart.htmlというグローバル変数にセットします。このグローバル変数は、レイアウト上に配置したWebビューアのコンテンツ参照式に設定しておいて下さい。具体的な計算式は以下のとおりです。
Substitute ( $HTML_Template ;
[ "@@@CANVAS_HEIGHT@@@" ; ChartJS::canvas_Height ];
[ "@@@CANVAS_WIDTH@@@" ; ChartJS::canvas_Width ];
[ "@@@LABELS@@@" ; $Labels ];
[ "@@@DATASET1_LABEL@@@" ; ChartJS::Dataset1_Label ];
[ "@@@DATASET1_DATA@@@" ; $Dataset1_Data ];
[ "@@@DATASET2_LABEL@@@" ; ChartJS::Dataset2_Label ];
[ "@@@DATASET2_DATA@@@" ; $Dataset2_Data ];
[ "@@@DATASET3_LABEL@@@" ; ChartJS::Dataset3_Label ];
[ "@@@DATASET3_DATA@@@" ; $Dataset3_Data ];
[ "@@@Y0_SCALE_LABEL@@@" ; ChartJS::Y0_scaleLabel ];
[ "@@@Y0_MIN@@@" ; ChartJS::Y0_Min ];
[ "@@@Y0_MAX@@@" ; ChartJS::Y0_Max ];
[ "@@@Y0_STEP_SIZE@@@" ; ChartJS::Y0_stepSize ];
[ "@@@Y1_SCALE_LABEL@@@" ; ChartJS::Y1_scaleLabel ];
[ "@@@Y1_MIN@@@" ; ChartJS::Y1_Min ];
[ "@@@Y1_MAX@@@" ; ChartJS::Y1_Max ];
[ "@@@Y1_STEP_SIZE@@@" ; ChartJS::Y1_stepSize ];
[ "@@@X_SCALE_LABEL@@@" ; ChartJS::X_scaleLabel ];
[ "@@@LEGEND_POSITION@@@" ; ChartJS::LegendPosition ];
[ "@@@TITLE_TEXT@@@" ; ChartJS::Title_Text ];
[ "@@@TITLE_FONT_SIZE@@@" ; ChartJS::Title_FontSize ]
)12行目：Webビューアの設定
$$Chart.htmlというグローバル変数にセットしたHTMLをWebビューアに読み込みます。これでレイアウト上のWebビューアがアップデートされて、グラフが描画されます。
ボタンへの割当
ここで作成したスクリプトは、レイアウト上に配置したグラフを再描画するボタンに割り当ててください。（※サンプルで提示したレイアウトでは【UPDATE CHART】ボタン）
3-4.グラフに描画する値をランダムに生成するスクリプトの作成
サンプルアプリとはいえ、すべての値を手作業で入力するのは面倒なので、ランダムな値を自動生成するスクリプトを作成しましょう。
引数に設定した上下限値でランダムな整数を生成するカスタム関数
最初にRandomIntegerというカスタム関数を作成しましょう。カスタム関数に設定する計算式は以下のとおりです。
Truncate ( Random * ( ( _max + 1) - _min ) ; 0 ) + _min
Random値の生成スクリプト
次に以下のようなスクリプトを記述します。スクリプト名はSetRandomValues等が良いでしょう。
スクリプトをボタンに割り当てる
作成したスクリプトを、レイアウト上のDataset1〜3に該当する入力値の付近に配置したボタンに割り当ててください。そして割り当てたスクリプトには次のような引数を設定して下さい。
JSONSetElement ( "" ;
[ "FQFN" ; GetFieldName ( ChartJS::Dataset1_Data ) ; JSONString ] ;
[ "Count" ; 6 ; JSONNumber ];
[ "Min" ; 30000 ; JSONNumber ] ;
[ "Max" ; 60000 ; JSONNumber ]
)JSONキー：FQFN
値をセットするターゲット・フィールドを完全修飾でセットします。
JSONキー：Count
繰り返しフィールドのカウント
JSONキー：Min/Max
生成する整数の最小値と最大値。Dataset3_Dataの値を設定するボタンの引数は、まずMinを60、Maxを100で設定してみると、バランスの良いグラフが描けると思います。
3-5.ソリューションの実行
ブラウズモードに切り替えて、意図したとおりにソリューションが動くか確認してみましょう。まだ各フィールド値には何も入っていない状態なので、適当な値をセットして下さい。グラフのタイトルや各種ラベル値は日本語での入力もOKです。
いかがでしょうか、意図したとおりにグラフは描画されたでしょうか？
もし表示がうまくいかない場合は、これまでの作業の中で何処かにミスが有るはずですので、もう一度作業結果を慎重に見直して下さい。
4.グラフのクリックイベントを取得する
嬉しいことにChart.jsには、グラフ要素をクリックしたときに、どのデータセットをクリックしたかを取得できる仕組みが用意されています。この仕組を使って、グラフ上でのクリックイベントを発生させ、FileMakerの任意のスクリプトをキックすることが可能です。
この機能を有効活用すると、例えば、グラフ上の１月のデータをクリックしたら、そのより詳細な情報を表示するレイアウトを表示するといったドリルダウン操作をより自然な操作性として組み込むことができます。
それでは実際にクリックイベントを組み込んでいきましょう。
4-1.HTMLテンプレートにクリックイベントを記述
まず、3-2 で作成したグラフを描画するスクリプトの４行目、テキストを挿入スクリプトステップでセットしているHTMLテンプレートに次のコードを加えます。一度テキストエディタやコードエディタに転記すると作業が進めやすいと思います。
document.getElementById( 'canvas' ).onclick = function( evt ) {
var activePoints = myComboChart.getElementsAtEvent( evt );
console.log( activePoints );
if ( activePoints.length > 0 ) {
var clickedElementindex = activePoints[ 0 ][ '_index' ];
var label = myComboChart.data.labels[ clickedElementindex ];
var value = myComboChart.data.datasets[ 0 ].data[ clickedElementindex ];
var fmScriptParam = {
datasetIndex: clickedElementindex,
datasetLabel: label,
datasetValue: value
};
// Call FileMaker Script
window.location = 'fmp://$/ChartJS.fmp12?script=openFMPURL¶m=' + JSON.stringify ( fmScriptParam ) ;
};
};記述する場所は、window.onloadメソッドを実行しているコードの後ろが良いでしょう。scriptタグをクローズしている直前になりますね。
15行目の【window.location = …】が実際にFileMakerのスクリプトをキックしている部分です。呼び出しているスクリプト名が【openFMPURL】。引数として、文字列に変換した【fmScriptParam】というJSONオブジェクト変数を定義しているところが読み取れると思います。
補足として、JavaScriptからFileMakerにJSON形式のデータを渡したい場合は、必ず文字列に変換をして下さい。JSONオブジェクトをそのまま渡すことはできません。上記のコードで【fmScriptParam】というJSONオブジェクト変数を、【JSON.stringify】で文字列に変換しているのはそのためです。
4-2.クリック後に呼び出されるFileMakerスクリプトの追加
次に、グラフがクリックされたら呼び出されるFileMakerのスクリプトを記述します。スクリプト名はopenFMPURL等にしておくと良いでしょう。
このスクリプトは、先に追加したJavaScriptからJSONフォーマットの文字列引数を受け取り、それをVer16より搭載された【JSONFormatElements】関数で整形して【$param】変数にセットしています。
あとは、それぞれのJSONキーと同じローカル変数に、JSONGetElement関数を使って各データを取り出してセットし、カスタムダイヤログを表示するという至ってシンプルなスクリプトです。
4-3.クリックイベントの実行
それでは実際にソリューションを実行してみましょう。グラフ要素をクリックすると、こちらのようなカスタムダイヤログが表示されると思います。
datasetLabelが５月を示しているにも関わらず、datasetIndexが4なのは、JavaScriptの配列がゼロからスタートするからですね。これは、FileMakerのJSON関連関数でも同じなので、少し注意が必要です。
また、Chart.jsのクリックイベントでは、どのDatasetIndexをクリックしたかは取得可能なのですが、DatasetIndexのどのDatasetをクリックしたのかまでは取る方法はわかりませんでした。今回の例ですと、５月をクリックしたのはわかるのですが、５月のどのグラフ要素をクリックしたのかまでは取得する方法がわかりませんでした。
もしわかる方がいらっしゃったらぜひ情報発信をお願いします！
5.まとめ
このブログでは、Chart.jsというオープンソースのJavaScriptライブラリを用いて、FileMakerの標準機能だけでは描画できない、棒グラフと折れ線グラフのコンビネーションチャートの書き方を解説しました。また、描画したグラフにクリックイベントを仕込んで、インタラクティブなソリューションの構築方法についても解説させていただきました。
Chart.jsでは、今回ご紹介したコンビネーションチャート以外にも、同じくFileMakerの標準機能では記述が難しいレーダーチャート等も記述することができます。そして同じくレーダーチャートにもクリックイベントを仕込むことができます。
特に医療・介護系でよく用いられるFileMakerなので、レーダーチャートを書きたいという要求は根強くあるようです。
弊社ブログでも、近日中にレーダーチャートの記述方法を解説する記事を公開したいと思います。
5-1.サンプルソリューションのダウンロード
まずは、今回ご紹介するソリューションをダウンロードして、実際に使ってみてください。
こちらのボタンからサンプルのカスタムAppをダウンロードしてください。
※Ver16以上のFileMakerPro/FileMakerProAdvancedが必要です。
※OSのバージョンや特定の環境下においては正常に動かない可能性もあります。
また、ダウンロードしたソリューションの中身を解析して、自分のソリューションに組み込んでいただくこともできます。
ぜひこちらから完全アクセス権の情報をご請求ください。
