カスタマイズビューでchart.jsを使ったグラフ描写

kintone カスタマイズ
1

はじめまして。よろしくお願いします。
表題の件についてです。
現在一覧でchart.jsを使ったグラフ表示させようとしています。
Tipsにある「Cybozu CDNを使ってレーダーチャートを表示する」
を参考にグラフのみ表示させる一覧を作ったところ、
canvasのスペースは確保されているのですが、グラフは表示されません。

以下コードです。
問題等ありましたらご指摘ください。

HTML
<canvas id=“canvas” width=“500” height=“500”></canvas>

javascript
(function () {
“use strict”;

var radarChartData = {
labels : [“a”,“b”,“c”],
datasets : [
{
fillColor : “rgba(0,140,232,.4)”,
strokeColor : “#008ce8”,
pointColor : “#008ce8”,
pointStrokeColor : “#fff”,
data : [3,4,3]
}
]
}
var canvas = document.getElementById(‘canvas’);
ctx = canvas.getContext(‘2d’);
var myRadar = new Chart(ctx).Radar(radarChartData,{scaleShowLabels : false, pointLabelFontSize : 20, angleLineColor : “#eee”, scaleLineColor : “#eee”});

})();

以上、よろしくお願いいたします。

2

N.Abeさん
cstapの落合です。
おそらくChart.jsが読み込まれる前にカスタマイズしたJavaScriptが処理されているのではないかと思います。
一覧の表示後イベントで処理させる方が適切かと思いますので、以下のようにされてはどうでしょうか？

(function () {
  "use strict";

  // 一覧ページ
  kintone.events.on('app.record.index.show', function(event) {
    var radarChartData = {
      labels : ["a","b","c"],
      datasets : [
        {
          fillColor : "rgba(0,140,232,.4)",
          strokeColor : "#008ce8",
          pointColor : "#008ce8",
          pointStrokeColor : "#fff",
          data : [3,4,3]
        }
      ]
    }
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var myRadar = new Chart(ctx).Radar(radarChartData,{scaleShowLabels : false, pointLabelFontSize : 20, angleLineColor : "#eee", scaleLineColor : "#eee"});

  });
})();

以上、参考になりますでしょうか？

3

cstap 落合様

丁寧な解説と修正ありがとうございました。
修正していただいたコードを試してみたところ、正常に表示されました。
JavaScript処理について正しく理解していませんでした。
非常に困っていたので大変助かりました。
誠にありがとうございました。

またこちらで質問させていただくこともあるかと思います。
その際はどうぞよろしくお願いいたします。

4

いえいえ(^^)
また何かわからないことがありましたらご質問ください。