質問編集履歴

1

実際のコードを追記

2018/09/03 06:45

投稿

musashidayo
musashidayo

スコア53

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,205 @@
1
1
  Chart.js(https://www.chartjs.org/)というものを使ってレーダーチャートを出力していて、背景色(グラフエリア内のみ)を変えたいと思い色々調べたのですが、レーダーチャートの内部だけの色を変更する方法がわかりません。
2
2
 
3
3
  http://oboe2uran.hatenablog.com/entry/2018/01/27/181126 こちらを参考にしてやってみたのですが、canvasタグ領域内の背景色が全て変わってしまい、思う通りにはいきませんでした。
4
+
5
+
6
+
7
+
8
+
9
+ 以下コードをChart.jsに追記
10
+
11
+ ```
12
+
13
+ Chart.pluginService.register({
14
+
15
+ beforeDraw: function(c){
16
+
17
+ if (c.config.options.chartArea && c.config.options.chartArea.backgroundColor) {
18
+
19
+ var ctx = c.chart.ctx;
20
+
21
+ var chartArea = c.chartArea;
22
+
23
+ ctx.save();
24
+
25
+ ctx.fillStyle = c.config.options.chartArea.backgroundColor;
26
+
27
+ ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
28
+
29
+ ctx.restore();
30
+
31
+ }
32
+
33
+ }
34
+
35
+ });
36
+
37
+ ```
38
+
39
+
40
+
41
+ ```html
42
+
43
+ <div class="canvas_outer">
44
+
45
+ <canvas id="myRadarChart1" width="" height=""></canvas>
46
+
47
+ </div>
48
+
49
+ <script>
50
+
51
+ Chart.pluginService.register({
52
+
53
+ beforeDraw: function (chart, easing) {
54
+
55
+ if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
56
+
57
+ var ctx = chart.chart.ctx;
58
+
59
+ var chartArea = chart.chartArea;
60
+
61
+
62
+
63
+ ctx.save();
64
+
65
+ ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
66
+
67
+ ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
68
+
69
+ ctx.restore();
70
+
71
+ }
72
+
73
+ }
74
+
75
+ });
76
+
77
+ var ctx = document.getElementById("myRadarChart1").getContext('2d');
78
+
79
+ var myRadarChart1 = new Chart(ctx, {
80
+
81
+ type: 'radar',
82
+
83
+ data: {
84
+
85
+ labels: [
86
+
87
+ 'A',
88
+
89
+ 'B',
90
+
91
+ 'C',
92
+
93
+ 'D',
94
+
95
+ 'E'
96
+
97
+ ],
98
+
99
+ datasets: [{
100
+
101
+ label: '',
102
+
103
+ data: [0,0,0,0,0,0],
104
+
105
+ backgroundColor: [
106
+
107
+ 'rgba(255, 107, 107, 0.678)',
108
+
109
+ ],
110
+
111
+ borderColor: [
112
+
113
+ 'rgba(255, 107, 107, 1)',
114
+
115
+ ],
116
+
117
+ borderWidth: 1
118
+
119
+ }]
120
+
121
+ },
122
+
123
+ options: {
124
+
125
+ chartArea: {
126
+
127
+ backgroundColor: 'rgba(230, 238, 255, 0.6)'
128
+
129
+ },
130
+
131
+ legend: {
132
+
133
+ display: false
134
+
135
+ },
136
+
137
+ scale: {
138
+
139
+ pointLabels: {
140
+
141
+ fontSize: 12, //フォントサイズ
142
+
143
+ fontFamily: "'游ゴシック',YuGothic,NotoSans,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif",
144
+
145
+ },
146
+
147
+ ticks: {
148
+
149
+ fontSize: 10,
150
+
151
+ stepSize: 1,
152
+
153
+ max: 5,
154
+
155
+ beginAtZero: true,
156
+
157
+ },
158
+
159
+ gridLines: {
160
+
161
+ pointLabels: {
162
+
163
+ fontSize: 18
164
+
165
+ }
166
+
167
+ }
168
+
169
+ },
170
+
171
+ scales: {
172
+
173
+ yAxes: [{
174
+
175
+ display: false,
176
+
177
+ gridLines: {
178
+
179
+ drawBorder: false
180
+
181
+ }
182
+
183
+ }],
184
+
185
+ xAxes: [{
186
+
187
+ display: false,
188
+
189
+ gridLines: {
190
+
191
+ drawBorder: false
192
+
193
+ }
194
+
195
+ }]
196
+
197
+ }
198
+
199
+ }
200
+
201
+ });
202
+
203
+ </script>
204
+
205
+ ```