【chart.js】レーダーチャートの矩形の背景色について

Question

前提・実現したいこと

chart.jsを使ってレーダーチャートを作っています。
グレーの背景色の上にチャートを設置するので、
チャートの目盛り内の背景色を白（#fff）に設定したいのですが、
どのオプションを設定すれば可能になるでしょうか。
また、どのような実現方法があるでしょうか。
レーダーチャート自体は問題なく表示されています。

具体的には、下記のようなチャートでいうと、
矩形（100〜0の目盛りの部分）の背景色を白くしたいです。
参考

該当のソースコード

<div id="contents">
<div class="chartArea">
	<canvas id="myChart"></canvas>
</div>
</div>
	

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js">

	body {
		background: #fff;
	}
	#contents {
		width: 60%;
		margin: 0 auto;
		padding: 100px 0;
	}
	.chartArea {
		max-width: 500px;
		height: 500px;
		margin: 0 auto;
		background: #ccc;
	}

	(function(){
		'use strict';
		var type = 'radar';
		
		var data = {
			labels: ['項目1', '項目2', '項目3', '項目4', '項目5', '項目6'],
			datasets: [{
				label: 'sample',
				data: [4, 2, 5, 2, 5, 3],
				backgroundColor: 'rgba(182,124,125,.4)',
				borderColor: 'rgba(202,129,125,1)',
				borderWidth: 1,
				pointRadius: 0,
				pointHitRadius: 0,
			}]
		};
		
		var options = {
			scale: {
				pointLabels: {
					fontColor: '#333',
					fontSize: 14,
					fontFamily: "'游ゴシック',YuGothic,NotoSans,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif",
				},
				ticks: {
					display: false,
					suggestedMin: 0,
					suggestedMax: 4,
				},
				gridLines: {
					display: true,
				},
			},
			title: {
				display: false,
			},
			animation: {
				duration: 1500,
			},
			legend: {
				display : false,
			}
		};
		
		var ctx = document.getElementById('myChart').getContext('2d');
		var myChart = new Chart(ctx, {
			type: type,
			data: data,
			options: options
		})
	})();

補足

chart.jsのドキュメントを見ると、目盛り関連のオプションは「gridLines」で設定できるようですが、
ここには背景色のオプションがそもそも無いようで・・・、どうにもならないでしょうか。
お力添えをいただければと思います。

参考：chart.jsドキュメント

Comments

[m.ts10806]

JavaScriptコードも省略されてしまうと（特に冒頭）再現確認が難しいです。やはり最低限htmlも記載されたほうが良いかと。

[kaoru08011]

ご指摘ありがとうございます。デモで作っていた最低限のコードでしたので省いてしまっていました・・・。

Answer 1

mts10806様にご教示いただいた方法で解決いたしました。

参考ページの通り、
canvas描画の前にbeforeDraw関数を記述。
ただしこのままだとcanvas全体に色が敷かれてしまうので
fillRect()メソッドの代わりにlineToメソッドでレーダーチャートと同形の矩形を描画し解決いたしました。

ありがとうございました。

	(function(){
		Chart.pluginService.register({
			beforeDraw: function(c){
				if (c.config.options.chartArea && c.config.options.chartArea.backgroundColor) {
					var ctx = c.chart.ctx;
					var chartArea = c.chartArea;
					ctx.save();
					ctx.fillStyle = c.config.options.chartArea.backgroundColor;
					//ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
					ctx.beginPath();
					ctx.moveTo(250,19);
					ctx.lineTo(342,72);
					ctx.lineTo(342,178);
					ctx.lineTo(250,230);
					ctx.lineTo(158,178);
					ctx.lineTo(158,72);
					ctx.closePath();
					ctx.fill();
					ctx.restore();
				}
			}
		});

		var type = 'radar';

　　　　　　　　　〜略〜


		var options = {
			scale: {
				pointLabels: {
					fontColor: '#333',
					fontSize: 14,
					fontFamily: "'游ゴシック',YuGothic,NotoSans,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif",
				},

　　　　　　　　　〜略〜

			chartArea: {
					backgroundColor: 'rgba(247, 247, 246, 1)'
			}
		};
		
		var ctx = document.getElementById('myChart').getContext('2d');
		
		var myChart = new Chart(ctx, {
			type: type,
			data: data,
			options: options
		})
	})();

Comments

[m.ts10806]

直接の解決方法はこちらなので、こちらのご自身の回答をベストアンサーとされた方が良いと思います。
あとから同じ問題を抱えた人が見たときにベストアンサーが最も目につきます。

[kaoru08011]

そうなのですね！登録したてで操作等あまり分からずで・・・。
アドバイスいただき重ね重ねありがとうございます。

Answer 2

下記の記事は参考になりますでしょうか。

• Chart.js 図全体背景色、グラフエリア背景色、イメージダウンロードの問題を解決する

元々あるオプションで解決するのではなく、
色々と機能追加していくようです。

「グラフエリア背景」あたりで実現可能に思いますがいかがでしょうか？
※すみません。私がただしく理解できていないかもしれません。ひとまず全体背景色は上記URL参考に変更できました。

Comments

[kaoru08011]

ご教示いただきありがとうございます！
教えていただいたページの内容で実現することができました！

一番最初に掲載されている記述を使い解決できましたが、
こちらの記述だとcanvasエリア全体に背景色が敷かれてしまいますので
fillRect()メソッドの記述を削除し、代わりに
lineTo()メソッドを使いレーダーチャートの矩形の形にパスを引くことで思い通りの背景を敷くことができました。
（説明が下手ですみません・・・）

とても助かりました。
お力添えいただき、本当にありがとうございました。

[m.ts10806]

どこか（chart.js本体）で色つけたり形作ってるのは確かなので、そこをいじれば何とかなるのはなるようですね。
解決できたようで何よりです。