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

**URL:** <https://community.cybozu.dev/t/topic/1946>\
**Category:** kintone 開発相談\
**Created:** [2015 年 1 月 7 日午前 4:08 UTC](https://community.cybozu.dev/t/topic/1946 "2015-01-07T04:08:38Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1872](https://avatars.discourse-cdn.com/v4/letter/l/e79b87/32.png) [@Legacy\_Account1872](https://community.cybozu.dev/u/Legacy_Account1872)\
**Post date:** [2015 年 1 月 7 日午前 4:08 UTC](https://community.cybozu.dev/t/topic/1946/1 "2015-01-07T04:08:38Z")

</div>

はじめまして。よろしくお願いします。  
表題の件についてです。  
現在一覧で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”});

})();

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

---

<div class="post-metadata">

**Author:** ![Legacy\_Account616](https://avatars.discourse-cdn.com/v4/letter/l/b5e925/32.png) [@Legacy\_Account616](https://community.cybozu.dev/u/Legacy_Account616)\
**Post date:** [2015 年 1 月 7 日午前 5:27 UTC](https://community.cybozu.dev/t/topic/1946/2 "2015-01-07T05:27:12Z")

</div>

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"});

  });
})();

```

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

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1872](https://avatars.discourse-cdn.com/v4/letter/l/e79b87/32.png) [@Legacy\_Account1872](https://community.cybozu.dev/u/Legacy_Account1872)\
**Post date:** [2015 年 1 月 7 日午前 6:06 UTC](https://community.cybozu.dev/t/topic/1946/3 "2015-01-07T06:06:22Z")

</div>

cstap 落合様

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

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

---

<div class="post-metadata">

**Author:** ![Legacy\_Account616](https://avatars.discourse-cdn.com/v4/letter/l/b5e925/32.png) [@Legacy\_Account616](https://community.cybozu.dev/u/Legacy_Account616)\
**Post date:** [2015 年 1 月 7 日午前 6:07 UTC](https://community.cybozu.dev/t/topic/1946/4 "2015-01-07T06:07:42Z")

</div>

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