何故グラフをカスタマイズするのか？

kintoneデフォルトでは、縦軸が２つあるタイプや、棒グラフと折れ線の混合グラフが作れないです。
以下のようなグラフは作れません。

サンプル引用元

www.f.kpu-m.ac.jp

 

1 User

10 Pockets

複合グラフの作り方

http://www.f.kpu-m.ac.jp/c/kouza/joho/kyozai/exel_howto/graph/fukugou/fukugou1.html

そのため、カスタマイズして上記グラフを何とか出力してみようと思いました。

調べた所、kintoneではグラフ表示イベントは用意されていますが、eventオブジェクトをいじってもアプリIDとイベントタイプの情報しか取れない、という事がわかりました。
いじれるタイミングは用意しておいたから、後は自分たちで良しなにやれ、という事でしょうか。。。

cybozu developer network

グラフ表示イベント

https://developer.cybozu.io/hc/ja/articles/202166280

グラフの表示後イベントグラフを表示した後に発生するイベントです。PC用とスマートフォン用で利用できます。スペースに貼りつけたアプリでは利用できません。モバイル非対応グラフ（クロス集計・表・定期レポート）を表示するときにも発生します。kintone.Promiseオブジェクトをreturnすると、非同期処理の完了を待って次の処理を開始します。イベントタイプ環境イベ...

カスタマイズ方法

やり方はシンプルかつ強引なやり方。

1. グラフ表示イベント時に起動
2. クエリストリングで「report」パラメータがカスタマイズしたいグラフのIDか判定する
3. 指定のIDなら「div.box-inner-gaia」配下を丸っと削除
4. その配下にcanvas要素を追加
5. グラフ化したいアプリ情報を好きに取得
6. それを元にChart.jsでグラフ化

以上。

グラフの各設定値を取得できたら良かったですが、そういった親切なAPIは用意されていないのでREST APIで自分で好きな情報を取りに行って、Chart.jsで好きなグラフを描画します。

画面HTMLは何も考えずにグラフ描画領域をごっそり削除した上でグラフを好き勝手に書いてしまいます。

パラメータ判定とか一応やってますが、ぶっちゃけ描画したいタイミングかどうかという意味しかありません。

かなり強引。しかし、グラフのカスタマイズは出来てます。（一応）

グラフを描画するChart.jsについては参考記事は色々あるので、他を当たってください。

株式会社グローバルゲート公式ブログ

 

10 Pockets

Canvasによるグラフ描画ライブラリ「Chart.js」を使ってホームページにグラフを掲...

https://www.globalgate.co.jp/blog/graph-adding-using-chartjs/

こんにちは。グローバルゲート制作部のモーリーです。 あつまれどうぶつの森の発売に備えて島の名前をずっと考えていますが、面白くセンスのいい名前がまったく思いつきません。「なっ島」ぐらいしか思いつかない…いい名前があったらご …

Qiita

 

18 Users

79 Pockets

Chart.jsでグラフを描画してみた - Qiita

https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369

1. はじめにChart.jsを使用すると、簡単に、綺麗なグラフを描画することができます。公式ホームページhttp://www.chartjs.org/今回は、特に使用頻度の高そうな、以下5種類グラフの描画方法を紹介...

www.chartjs.org

 

1 Tweet

735 Users

7679 Pockets

Chart.js | Open source HTML5 Charts for your website

https://www.chartjs.org

Simple, clean and engaging HTML5 based JavaScript charts. Chart.js is an easy way to include animated, interactive graphs on your website for free.

実際にやってみる

アプリは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);

結果は以下の通り。

若干強引ですが、とりあえず混合グラフ的なものは出来ましたね。

以上。