質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    20439questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 797

cat_tom

score 4

レーダーチャートは表示されるのですが、中心から徐々に大きくなるなような表示ができません。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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • hope_mucci

    2018/08/05 08:59

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

    キャンセル

回答 3

checkベストアンサー

+1

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

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

<div id="myChartD">
  <canvas id="chart" width=256 height=256></canvas>
</div>
#myChartD{
  width:400px;
  height:400px;
}

試してみてください。

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/06 07:23

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

    キャンセル

+1

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

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

Radar | chartjs.org

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/05 15:15

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

    キャンセル

  • 2018/08/05 17:57

    アニメーションに関しては新規で回答を起こしました。
    hoverというのは(主にマウスカーソルを)その要素の上に重ねた時の挙動を指します。
    よくWebページでマウスカーソルを乗せると色が変わったりすることがあると思います。そのような挙動のことです。

    キャンセル

+1

cat_tom さん

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • JavaScript

    20439questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。