鎌形 稔 7月/ 3/ 2020 | 0
何故グラフをカスタマイズするのか？
kintoneデフォルトでは、縦軸が２つあるタイプや、棒グラフと折れ線の混合グラフが作れないです。
以下のようなグラフは作れません。
サンプル引用元
[blogcard url=”http://www.f.kpu-m.ac.jp/c/kouza/joho/kyozai/exel_howto/graph/fukugou/fukugou1.html”]
そのため、カスタマイズして上記グラフを何とか出力してみようと思いました。
調べた所、kintoneではグラフ表示イベントは用意されていますが、eventオブジェクトをいじってもアプリIDとイベントタイプの情報しか取れない、という事がわかりました。
いじれるタイミングは用意しておいたから、後は自分たちで良しなにやれ、という事でしょうか。。。
[blogcard url=”https://developer.cybozu.io/hc/ja/articles/202166280″]
カスタマイズ方法
やり方はシンプルかつ強引なやり方。
- グラフ表示イベント時に起動
- クエリストリングで「report」パラメータがカスタマイズしたいグラフのIDか判定する
- 指定のIDなら「div.box-inner-gaia」配下を丸っと削除
- その配下にcanvas要素を追加
- グラフ化したいアプリ情報を好きに取得
- それを元にChart.jsでグラフ化
以上。
グラフの各設定値を取得できたら良かったですが、そういった親切なAPIは用意されていないのでREST APIで自分で好きな情報を取りに行って、Chart.jsで好きなグラフを描画します。
画面HTMLは何も考えずにグラフ描画領域をごっそり削除した上でグラフを好き勝手に書いてしまいます。
パラメータ判定とか一応やってますが、ぶっちゃけ描画したいタイミングかどうかという意味しかありません。
かなり強引。しかし、グラフのカスタマイズは出来てます。（一応）
グラフを描画するChart.jsについては参考記事は色々あるので、他を当たってください。
[blogcard url=”https://www.globalgate.co.jp/blog/graph-adding-using-chartjs/”]
[blogcard url=”https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369″]
[blogcard url=”https://www.chartjs.org/”]
実際にやってみる
アプリは2019年東京都の合計降水量、平均気温を纏めたものを使います。（気象庁のページでデータ取得）
これを棒グラフ化すると以下のような感じ。
上のグラフを降水量を棒グラフ、平均気温を折れ線グラフにカスタマイズするソースが以下です。
なおreportパラメータはURLを見れば分かります。
(function($){
'use strict';
const getCurrentRecords = () => {
var body = {
'app': kintone.app.getId(),
'query': 'order by 月 asc',
'fields': ['月', '降水量', '平均気温']
};
return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', body);
}
const createChart = (records) => {
console.log(records);
var months = records.records.map((value) => {
return value['月'].value;
});
var precipitation = records.records.map((value) => {
return value['降水量'].value;
});
var averageTemperature = records.records.map((value) => {
return value['平均気温'].value;
});
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: months,
datasets: [
{
label: '平均気温',
data: averageTemperature,
type: 'line',
borderColor: "rgba(0,0,255,1)",
backgroundColor: "rgba(0,0,0,0)",
yAxisID: 'right-y-axis'
},
{
label: '降水量',
data: precipitation,
borderColor: "rgba(0,191,127,1)",
backgroundColor: "rgba(0,191,127,1)",
yAxisID: 'left-y-axis'
},
],
},
options: {
title: {
display: true,
text: '2019年東京都 降水量、平均気温'
},
scales: {
yAxes: [{
id: 'left-y-axis',
scaleLabel:{
display: true,
labelString: '合計降水量(mm)'
},
position: 'left',
ticks: {
suggestedMax: 800,
suggestedMin: 0,
stepSize: 100,
callback: function(value, index, values){
return value + 'mm'
}
}
},
{
id: 'right-y-axis',
scaleLabel:{
display: true,
labelString: '平均気温（℃）'
},
position: 'right',
ticks: {
suggestedMax: 40,
suggestedMin: 0,
stepSize: 5,
callback: function(value, index, values){
return value + '℃'
}
}
}]
},
}
});
}
kintone.events.on(['app.report.show'], function(event){
if((/9999999/).test(location.search)){
console.log('custom graph');
// 削除
$('div.box-inner-gaia').empty();
// 背景色設定
$('div.box-inner-gaia').css('background-color', 'white');
// canvas要素追加
$('div.box-inner-gaia').append($('<canvas id="myChart"></canvas>'));
// データ取得、グラフ表示
Promise.resolve()
.then(() => getCurrentRecords())
.then((resp) => createChart(resp))
.catch((message) => console.error(message))
.finally(() => console.log('end'));
}
return event;
});
})(jQuery);
結果は以下の通り。
若干強引ですが、とりあえず混合グラフ的なものは出来ましたね。
以上。