teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

実際のコードを追記

2018/09/03 06:45

投稿

musashidayo
musashidayo

スコア63

title CHANGED
File without changes
body CHANGED
@@ -1,2 +1,103 @@
1
1
  Chart.js(https://www.chartjs.org/)というものを使ってレーダーチャートを出力していて、背景色(グラフエリア内のみ)を変えたいと思い色々調べたのですが、レーダーチャートの内部だけの色を変更する方法がわかりません。
2
- http://oboe2uran.hatenablog.com/entry/2018/01/27/181126 こちらを参考にしてやってみたのですが、canvasタグ領域内の背景色が全て変わってしまい、思う通りにはいきませんでした。
2
+ http://oboe2uran.hatenablog.com/entry/2018/01/27/181126 こちらを参考にしてやってみたのですが、canvasタグ領域内の背景色が全て変わってしまい、思う通りにはいきませんでした。
3
+
4
+
5
+ 以下コードをChart.jsに追記
6
+ ```
7
+ Chart.pluginService.register({
8
+ beforeDraw: function(c){
9
+ if (c.config.options.chartArea && c.config.options.chartArea.backgroundColor) {
10
+ var ctx = c.chart.ctx;
11
+ var chartArea = c.chartArea;
12
+ ctx.save();
13
+ ctx.fillStyle = c.config.options.chartArea.backgroundColor;
14
+ ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
15
+ ctx.restore();
16
+ }
17
+ }
18
+ });
19
+ ```
20
+
21
+ ```html
22
+ <div class="canvas_outer">
23
+ <canvas id="myRadarChart1" width="" height=""></canvas>
24
+ </div>
25
+ <script>
26
+ Chart.pluginService.register({
27
+ beforeDraw: function (chart, easing) {
28
+ if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
29
+ var ctx = chart.chart.ctx;
30
+ var chartArea = chart.chartArea;
31
+
32
+ ctx.save();
33
+ ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
34
+ ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
35
+ ctx.restore();
36
+ }
37
+ }
38
+ });
39
+ var ctx = document.getElementById("myRadarChart1").getContext('2d');
40
+ var myRadarChart1 = new Chart(ctx, {
41
+ type: 'radar',
42
+ data: {
43
+ labels: [
44
+ 'A',
45
+ 'B',
46
+ 'C',
47
+ 'D',
48
+ 'E'
49
+ ],
50
+ datasets: [{
51
+ label: '',
52
+ data: [0,0,0,0,0,0],
53
+ backgroundColor: [
54
+ 'rgba(255, 107, 107, 0.678)',
55
+ ],
56
+ borderColor: [
57
+ 'rgba(255, 107, 107, 1)',
58
+ ],
59
+ borderWidth: 1
60
+ }]
61
+ },
62
+ options: {
63
+ chartArea: {
64
+ backgroundColor: 'rgba(230, 238, 255, 0.6)'
65
+ },
66
+ legend: {
67
+ display: false
68
+ },
69
+ scale: {
70
+ pointLabels: {
71
+ fontSize: 12, //フォントサイズ
72
+ fontFamily: "'游ゴシック',YuGothic,NotoSans,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif",
73
+ },
74
+ ticks: {
75
+ fontSize: 10,
76
+ stepSize: 1,
77
+ max: 5,
78
+ beginAtZero: true,
79
+ },
80
+ gridLines: {
81
+ pointLabels: {
82
+ fontSize: 18
83
+ }
84
+ }
85
+ },
86
+ scales: {
87
+ yAxes: [{
88
+ display: false,
89
+ gridLines: {
90
+ drawBorder: false
91
+ }
92
+ }],
93
+ xAxes: [{
94
+ display: false,
95
+ gridLines: {
96
+ drawBorder: false
97
+ }
98
+ }]
99
+ }
100
+ }
101
+ });
102
+ </script>
103
+ ```