chart.js　グラフの複数設置とラベルの改行、グラフの軸線の色を変更したい。

商品の比較に使用するため、同一ページにレーダーチャートを複数設置したいです。
「chart.js」を使用しています。

複数のレーダーチャートを設置するため、現在以下のようなコードになっております。

html
1<!doctype html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8">
6    <title></title>
7    <link rel="stylesheet" href="style.css">
8    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
9    <script src="Chart.js"></script>
10    <script>
11    $(function(){
12        var ctx = document.getElementById("myChart01").getContext('2d');
13        var myChart01 = new Chart(ctx, {
14            type: 'radar',
15            data: {
16                labels: ["価格", "品質", "セキュリティ", "デザイン", "ブランド力", "アフターサービス"],
17                datasets: [{
18                    data: [1, 2, 3, 4, 3, 2],
19                    backgroundColor: 'rgba(3,169,244,0.3)',
20                    borderColor: 'rgba(3,169,244,1.0)',
21                    pointBackgroundColor: 'rgba(3,169,244,0.8)',
22                    borderWidth: 1
23                }]
24            },
25            options: {
26                legend: {
27                    display: false
28                 },
29                 scale: {
30                    ticks: {
31                        stepSize: 1,
32                        max: 5,
33                        beginAtZero: true,
34                    }
35                 }
36            }
37        });
38
39        var ctx = document.getElementById("myChart02").getContext('2d');
40        var myChart02 = new Chart(ctx, {
41            type: 'radar',
42            data: {
43                labels: ["価格", "品質", "セキュリティ", "デザイン", "ブランド力", "アフターサービス"],
44                datasets: [{
45                    data: [3, 3, 3, 3, 3, 2],
46                    backgroundColor: 'rgba(3,169,244,0.3)',
47                    borderColor: 'rgba(3,169,244,1.0)',
48                    pointBackgroundColor: 'rgba(3,169,244,0.8)',
49                    borderWidth: 1
50                }]
51            },
52            options: {
53                legend: {
54                    display: false
55                 },
56                 scale: {
57                    ticks: {
58                        stepSize: 1,
59                        max: 5,
60                        beginAtZero: true,
61                    }
62                 }
63            }
64        });
65    });
66    </script>
67</head>
68
69<body>
70
71    <section class="clearfix">
72        <h1>商品1</h1>
73        <article class="artImg"><img src="sample01.jpg" alt="商品画像"></article>
74        <article class="artTxt">商品1説明</article>
75        <article class="artGrp">
76                <canvas id="myChart01" width="100%" height="100%"></canvas>
77        </article>
78    </section>
79
80    <section class="clearfix">
81        <h1>商品2</h1>
82        <article class="artImg"><img src="sample02.jpg" alt="商品画像"></article>
83        <article class="artTxt">商品2説明</article>
84        <article class="artGrp">
85                <canvas id="myChart02" width="100%" height="100%"></canvas>
86        </article>
87    </section>
88</body>
89
90</html>

これ以降もレーダーチャートが増えるため、コードが長くなってしまいます。
少しでもコードを短く、見やすくするためにオプションを纏めて設定する事は可能でしょうか？

やりたい事は全部で３つあります。
①レーダーチャートのデザインは統一のため、オプションをまとめて設定したい。
②「アフターサービス」が長いので「アフター<br>サービス」のように改行して表示したい。
③レーダーチャートのラベルの線の色、太さを変更したい。
※「backgroundColor」や「borderColor」で設定出来るボーダーではなく、その後ろの六角形の線の部分です。

各プロパティは確認しましたが六角形のラベルの線の色を変更するプロパティはないようでした。
参考：https://misc.0o0o.org/chartjs-doc-ja/charts/radar.html

また、改行について以下を参考にしましたが、
参考：https://teratail.com/questions/72208
こちらでベストアンサーに選ばれている方法はコードが変わったのかテキスト出力の部分が検索で出て来ず、試すことが出来ませんでした。

defghi1977

2018/03/29 06:10

質問は可能であれば一問一答となるように心がけて下さい.

行動規範の内容に同意します

回答3件

ベストアンサー

①レーダーチャートのデザインは統一のため、オプションをまとめて設定したい。

パラメータは単なるJSONなので, JSONのテンプレートをグラフを描く都度コピーするようにすれば可能です.

②「アフターサービス」が長いので「アフター<br>サービス」のように改行して表示したい。

ラベルの部分を文字列の配列とすれば良いようです.

https://stackoverflow.com/questions/37090625/chartjs-new-lines-n-in-x-axis-labels-or-displaying-more-information-around-ch

③レーダーチャートのラベルの線の色、太さを変更したい。

oimo014さんの回答をご覧ください.

実装例

JavaScript
1"use strict";
2{
3	const canvasTmpl = document.createElement("canvas");
4	Object.assign(canvasTmpl, {width: 400, height: 400});
5	const chartSettingsString = JSON.stringify({
6		type: "radar",
7		data: {
8			labels: ["価格", "品質", "セキュリティ", "デザイン", "ブランド力", ["アフター", "サービス"]],
9			datasets: [
10				{
11					backgroundColor: "blue",
12					borderColor: "red",
13					pointBackgroundColor: "gray",
14					borderWidth: 2
15				}
16			]
17		},
18		options: {
19			legend: {display: false},
20			animation: false,
21			responsive: false,
22			scale: {
23				ticks: {
24					stepSize: 1,
25					max: 5,
26					beginAtZero: true
27				}
28			}
29		}
30	});
31	var addChart = function(target, values){
32		const canvas = canvasTmpl.cloneNode(false);
33		target.appendChild(canvas);
34		const chartSettings = JSON.parse(chartSettingsString);
35		chartSettings.data.datasets[0].data = [...values];
36		new Chart(canvas.getContext("2d"), chartSettings);
37	}
38}

としておいて,

HTML
1<div>
2<script>addChart(document.currentScript.parentNode, [3, 3, 3, 3, 3, 2])</script>
3</div>

とかね

投稿2018/03/29 06:08

編集2018/03/29 14:00

defghi1977

総合スコア4756

uzr1709

2018/03/29 07:03

ありがとうございます。 ②と③解決致しました。 ①ですが、教えていただいたコードで試していたのですが、チャートがbody内に書かれてしまいます。任意の位置に配置したいので、<div class="myChart"></div>を用意、「addChart(document.body, [3, 3, 3, 3, 3, 2]);」を「addChart(document.getElementsByClassName('myChart02'), [3, 3, 3, 3, 3, 2]);」に書き換えましたが変わらず指定したい位置に収まりません。申し訳ないのですが指定の方法を教えて頂けないでしょうか？上記では出来ない理由も教えて頂けますと有り難いです。

defghi1977

2018/03/29 07:06

せっかく使いやすいようにコードを関数化していたのに・・・ addChart(document.getElementsByClassName('myChart02')[0], [3, 3, 3, 3, 3, 2]); とかしておけばとりあえず動くので, あとはご自身でお考え下さい

uzr1709

2018/03/29 07:51

すみません。「addChart(document.getElementsByClassName('myChart')[0], [3, 3, 3, 3, 3, 2]);」とする事で関数ではなくなるという事が分かりません。お手数お掛けして申し訳ないですがお教え頂けませんか？またhead内の<script>に記述すると「test.html:43 Uncaught TypeError: Cannot read property 'appendChild' of null」のエラーが出るため、 bodyの一番後ろに記述しています。これがまず間違いなのでしょうか？

defghi1977

2018/03/29 13:54

すまぬ、よく見たらコードしくじってんね

defghi1977

2018/03/29 14:06

（できればこのくらいのバグは自分で解決してほしかった） > 「test.html:43 Uncaught TypeError: Cannot read property 'appendChild' of null」のエラーが出るため、これはさっきのバグの影響で, body要素の初期化の前にbody要素にcanvas要素(チャート)を挿入しようとして, そんなものねーよと叱られただけです.

uzr1709

2018/03/30 00:38

ありがとうございます。 canvasが無いところまでは分かったのですが作成がうまくいかず困っておりました。いつもお世話になり有難う御座います。教えていただいたコードをもとにもっと勉強致します。

行動規範の内容に同意します

③については、「スタイリング」の項目にある「グリッド線の設定」をご確認ください。
https://misc.0o0o.org/chartjs-doc-ja/axes/styling.html

javascript
1options: {
2	legend: {
3		display: false
4	},
5	scale: {
6		ticks: {
7			stepSize: 1,
8			max: 5,
9			beginAtZero: true,
10		}
11	},
12	gridLines: {
13		display: true,
14		color: "希望のカラーコード",
15		lineWidth: 希望の太さ
16	}
17}

投稿2018/03/29 05:42

oimo014

総合スコア103

uzr1709

2018/03/29 07:03

有難うございます。グリッド線の設定は別ファイルだったのですね。見落としておりました。

行動規範の内容に同意します

少しでもコードを短く、見やすくするためにオプションを纏めて設定する事は可能でしょうか？

はい、可能です。

投稿2018/03/29 05:27

退会済みユーザー

総合スコア0

uzr1709

2018/03/29 05:29

お手数おかけしますが、どのように縮めたら良いかご教授頂けませんか？

退会済みユーザー

2018/03/29 12:38 編集

くれくれ君のYESかNOのクローズドクエスチョンに対してYESと適切な回答をしただけなのに、低評価を貰うという理不尽さ。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

chart.js　グラフの複数設置とラベルの改行、グラフの軸線の色を変更したい。

関連した質問