動きのあるレーダーチャートを表示したいが、何故に機能しないのでしょうか？

レーダーチャートは表示されるのですが、中心から徐々に大きくなるなような表示ができません。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: ['総合','ＤＰ１', 'ＤＰ２', 'ＤＰ３', 'ＤＰ４', 'ＤＰ５'],
        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>

hope_mucci

2018/08/04 23:59

中心から徐々に大きくなる、という事象の具体的な説明をお願いします。何のことかさっぱり。次に、何かライブラリを使っていると思いますが、何のライブラリを使用しているか明記してください。また、HTMLも現象を再現できるものを書いてください。

行動規範の内容に同意します

回答3件

ベストアンサー

ロード時のアニメーションのことですか。納得。
確かに中心から広がるように表示されますね。

で、このソースでどうしてアニメーションしないのかですが、正確な理由はわかりませんが<canvas>をbodyにそのまま貼り付けるとアニメーションしていないように見える模様です。
（アニメーション自体はしていると思うのだが、目視できない）
適切なサイズに設定した<div>でくくってやるとアニメーションが見えました。
canvasに指定されたサイズは無視されてwidth: 100%に勝手にセットされるような挙動です。

html
1<div id="myChartD">
2  <canvas id="chart"　width=256 height=256></canvas>
3</div>

css
1#myChartD{
2  width:400px;
3  height:400px;
4}

試してみてください。

こっちで試してみた結果 | jsfiddle

投稿2018/08/05 08:54

hope_mucci

総合スコア4447

cat_tom

2018/08/05 22:23

hope-mucciさん、ありがとうございました。お教え頂いたようにしましたら、思い通りのグラフが描けました。　私は、商業高校情報科2年生です。夏休みの課題として、プログラムを作っています。もっとプログラムの勉強をしたいと思うようになりました。

行動規範の内容に同意します

cat_tom さん

http://www.takuro.info/chart/

を具体例にあげてますが、このサンプルは hover でアニメーションされているものではないということはご理解されていますか？アニメーションがスタートするのは、ドキュメントの読み込み時です。
hover とはマウスカーソルがオブジェクトの上に乗った時というイベントです。

Hoverが機能していないようです。

どうも、Hover 時にアニメーションしたいのではなく、単にアニメーションしたいということで、サンプルと同じものを作りたいのであれば、ブラウザで http://www.takuro.info/chart/ を開き、ソースコードを表示して確認してください。

投稿2018/08/05 06:30

退会済みユーザー

総合スコア0

中心から徐々に大きくなるような、という事象の説明が相変わらずないのでそこは飛ばしますが、chart.jsのレーダーチャートのプロパティにはhover関連のプロパティは存在しません。

詳しくはドキュメント見てください。

Radar | chartjs.org

raderはbarなどのように描画領域にマウスカーソルを入れても何も起こらない仕様です。hoverが機能していないのではなく、hoverの機能がない。
プロットをhoverする際の挙動を設定するプロパティは用意されています。
マウスカーソルを当てた時だけ点が大きくなるようなことはできるみたいです。

投稿2018/08/05 01:38

hope_mucci

総合スコア4447

cat_tom

2018/08/05 06:15

ありがとうございます。「中心から徐々に大きくなるような」は表現が悪くて趣意が伝わりせんでした。アニメーションと云うのでしょうか、例えば次のようなものです。 http://www.takuro.info/chart/ hover関連プロパティでないとすれば、どのようなことをすべきなのでしょうか。詳しくお教えください。