レーダーチャートは表示されるのですが、中心から徐々に大きくなるなような表示ができません。Hoverが機能していないようです。何故なのでしょうか。解決方法をお教えください。
変数dpx, dp1x, dp2x, dp3x, dp4x, dp5xには、1~100の数値が入ります。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>データテスト</title> <script src="Chart.bundle.min.js"></script> <script src="utils.js"></script> </head> <body> <canvas id="chart" width=256 height=256></canvas> <script type="text/javascript"> var ctx = document.getElementById('chart').getContext('2d'); var myChart = new Chart(ctx, { type: 'radar', data: { labels: ['総合','DP1', 'DP2', 'DP3', 'DP4', 'DP5'], datasets: [{ label: 'グループ別達成度', //backgroundColor: "rgba(153,255,255,0.4)" data: [55, 85, 70, 90, 65,80], backgroundColor: "rgba(255,0,0,0.2)", // 線の下の塗りつぶしの色 borderColor: "red", // 線の色 //この2行が機能していなような!? HoverBackgroundColor: "rgba(255,0,0,0.2)", HoverBorderColor: "red", borderWidth: 2, // 線の幅 pointStyle: "circle", // 点の形状 pointRadius: 6, // 点形状の半径 pointBorderColor: "red", // 点の境界線の色 pointBorderWidth: 2, // 点の境界線の幅 pointBackgroundColor: "yellow", // 点の塗りつぶし色 pointLabelFontSize: 200 }] }, options: { scale: { legend: { position: 'left', }, ticks: { stepSize: 10, // 目盛の間隔 max: 100, //最大値 beginAtZero: true } } } }); </script> </body> </html>
中心から徐々に大きくなる、という事象の具体的な説明をお願いします。何のことかさっぱり。次に、何かライブラリを使っていると思いますが、何のライブラリを使用しているか明記してください。また、HTMLも現象を再現できるものを書いてください。
回答3件
あなたの回答
tips
プレビュー