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

質問編集履歴

1

CODE全部載せました

2018/08/05 00:30

投稿

cat_tom
cat_tom

スコア12

title CHANGED
File without changes
body CHANGED
@@ -2,41 +2,60 @@
2
2
  変数dpx, dp1x, dp2x, dp3x, dp4x, dp5xには、1~100の数値が入ります。
3
3
  ![イメージ説明](dbe46448d7a55673f9501b88cc898fb5.jpeg)
4
4
  ```ここに言語を入力
5
- var ctx = document.getElementById('chart').getContext('2d');
6
- var myChart = new Chart(ctx, {
7
- type: 'radar',
5
+ <html>
8
- data: {
9
- labels: ['総合','DP1', 'DP2', 'DP3', 'DP4', 'DP5'],
10
- datasets: [{
6
+ <head>
7
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
11
- label: 'グルプ別到達度',
8
+ <title>デタテスト</title>
12
- data: [dpx, dp1x, dp2x, dp3x, dp4x, dp5x],
13
- backgroundColor: "rgba(255,0,0,0.2)", // 線の下の塗りつぶしの色
9
+ <script src="Chart.bundle.min.js"></script>
14
- borderColor: "red", // 線の色
10
+ <script src="utils.js"></script>
15
- //hoverが機能しない(2行)
11
+ </head>
16
- HoverBackgroundColor: "rgba(255,0,0,0.2)",
17
- HoverBorderColor: "red",
18
12
 
13
+ <body>
14
+ <canvas id="chart" width=256 height=256></canvas>
15
+
16
+ <script type="text/javascript">
17
+
18
+ var ctx = document.getElementById('chart').getContext('2d');
19
+ var myChart = new Chart(ctx, {
20
+ type: 'radar',
21
+ data: {
22
+ labels: ['総合','DP1', 'DP2', 'DP3', 'DP4', 'DP5'],
23
+ datasets: [{
24
+ label: 'グループ別達成度',
25
+ //backgroundColor: "rgba(153,255,255,0.4)"
26
+ data: [55, 85, 70, 90, 65,80],
27
+ backgroundColor: "rgba(255,0,0,0.2)", // 線の下の塗りつぶしの色
28
+ borderColor: "red", // 線の色
29
+ //この2行が機能していなような!?
30
+ HoverBackgroundColor: "rgba(255,0,0,0.2)",
31
+ HoverBorderColor: "red",
32
+
19
- borderWidth: 2, // 線の幅
33
+ borderWidth: 2, // 線の幅
20
- pointStyle: "circle", // 点の形状
34
+ pointStyle: "circle", // 点の形状
21
- pointRadius: 6, // 点形状の半径
35
+ pointRadius: 6, // 点形状の半径
22
- pointBorderColor: "red", // 点の境界線の色
36
+ pointBorderColor: "red", // 点の境界線の色
23
- pointBorderWidth: 2, // 点の境界線の幅
37
+ pointBorderWidth: 2, // 点の境界線の幅
24
- pointBackgroundColor: "yellow", // 点の塗りつぶし色
38
+ pointBackgroundColor: "yellow", // 点の塗りつぶし色
25
- pointLabelFontSize: 200
39
+ pointLabelFontSize: 200
26
- }]
40
+ }]
27
- },
41
+ },
28
- options: {
42
+ options: {
29
- scale: {
43
+ scale: {
30
- legend: {
44
+ legend: {
31
- position: 'left',
45
+ position: 'left',
32
- },
46
+ },
33
- ticks: {
47
+ ticks: {
34
- stepSize: 10, // 目盛の間隔
48
+ stepSize: 10, // 目盛の間隔
35
- max: 100, //最大値
49
+ max: 100, //最大値
36
- beginAtZero: true
50
+ beginAtZero: true
51
+ }
37
52
  }
38
- }
53
+ }
39
- }
40
- });
41
54
 
55
+ });
56
+
57
+ </script>
58
+
59
+ </body>
60
+ </html>
42
61
  ```