レーダーチャートの表示項目を増やしたい

kintone カスタマイズ
1

Chart.js を使ってレーダーチャートを表示する

↑こちらのカスタマイズがうまくいきません…

例だと、5教科（5項目）のレーダーチャートの表示になっておりますが、業務では7項目の表示がしたいです。初心者なりに色々試してみたのですが手を加えるとグラフが表示されなくなってしまいます。

追記して試してみたのは以下2点です。

labels:["国語","数学","英語","社会","理科", "家庭", "美術"],

→ グラフが表示されなくなるわけではないが、追加した項目「家庭・美術」は表示されない

datasets: [
{
             label: "My First dataset",
             fillColor: "rgba(0,140,232,.4)",
             strokeColor: "rgba(151,187,205,1)",
             pointColor: "rgba(151,187,205,1)",
             pointStrokeColor: "#fff",
             data: [
             record['Japanese']['value'],
             record['Mathematics']['value'],
             record['English']['value'],
             record['Social_studies']['value'],
             record['Science']['value']
            record['Home']['value'],
            record['Art']['value']
]
}
]

→ 2行追加するとグラフ自体表示がされなくなってしまう。

 

他に変更すべき箇所があるようでしたら教えてください。よろしくお願いいたします。

2

まつむーさん、こんにちは。プロジェクト・アスノートの松田です。

// Chart.js のオプションを設定する

の部分のパラメータを見直しされればいいかと思います。

Chart.jsのドキュメント等を見て、必要な項目を見直しましょう。

3

Shotaro Matsudaさんはじめまして、返信ありがとうございます。

「オプションを設定する」の初心者なりに1か所ずつ数値を変更して試してみたのですがわかりませんでした。

この部分だとフォントや線や点の設定だけのように思うのですが（違っていたらすみません。）

具体的にどこを変更すればいいか教えていただけるととても助かります…。

var options = {
scaleShowLine: true,
angleShowLineOut: true,
scaleShowLabels: true,
scaleBeginAtZero: true,
angleLineColor: "rgba(0,0,0,.1)",
angleLineWidth: 1,
pointLabelFontFamily: "'Arial'",
pointLabelFontStyle: "normal",
pointLabelFontSize: 16,
pointLabelFontColor: "#666",
pointDot: true,
pointDotRadius: 5,
pointDotStrokeWidth: 1,
pointHitDetectionRadius: 20,
datasetStroke: true,
datasetStrokeWidth: 3,
datasetFill: true,
responsive: true
};
4

まつむーさん、

失礼しました。勘違いしていました！

５点を７点に増やすだけでしたら、まつむーさんのやられている方法で大丈夫だと思います。

５点のグラフはきちんと表示されていますか？

使用する char.js のバージョンによっていろいろ設定方法が異なるようです。

使用しているバージョンに合わせて、適切な方法に修正する必要があるかもしれません。

5

Shotaro Matsudaさん返信ありがとうございます。

5点のグラフは問題なく表示されています。7点にするとグラフが表示されなくなります。

また、char.js のバージョンも既に試していて「v1.0.2」以降のバージョンだと5点のグラフすら表示されなくなります。

4点に変更→4点のレーダーチャート表示

6点に変更→グラフが表示されない

7点に変更→グラフが表示されない

サンプルも「v1.0.2」に対応しましたと書いてあったのでこちらを使用しています。

6

デフォルトの５点から、データを削除した４点は正常表示。

データを増やした、６，７点は表示されない、ということであれば、

まず疑うべきはデータが正しく作られているか？ですかね。

アプリ構成とソースコードを比べてみないと、詳しくはわかりませんが、

新たに追加したフィールドのフィールドコード等は正しいですか？

 

ちなみに、私の環境では、Chart.js v2.2.2 （最新）で、最後のところを以下の記載に変更して、７点が正常表示されています。

https://js.cybozu.com/chartjs/v2.2.2/Chart.min.js

var myChart = new Chart(elCanvas, {
type: 'radar',
data: data,
options: options
});

 

7

たぶん、datasets設定のカンマ「,」漏れだと思います。

動かない？そんな時はデバッグをしてみよう！入門編 でデバッグしてみましょう。

record['Science']['value']
8

rex0220さん、

補足ありがとうございます。基本的なところを見落としていました。お恥ずかしい（汗）

9

rex0220さん、Shotaro Matsudaさん

 

ありがとうございます！カンマを修正したらうまく表示されました。

お手数おかけしてしまって申し訳ございませんでした。