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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

Q&A

0回答

794閲覧

chart.jsのグラフ崩れ

sayaka1001

総合スコア0

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

0グッド

0クリップ

投稿2020/10/14 09:35

前提・実現したいこと

chart.jsにて表示されるグラフにマウスオーバーするとグラフが崩れるのを解決

発生している問題・エラーメッセージ

グラフにマウスオーバーするとグラフが複数個あるように重なって表示されます

該当のソースコード

(rails.jQuery) <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <div class="content"> var ctx = document.getElementById("myYoutubeChart"); var myChart = new Chart(ctx, { type: 'pie', data: { labels: ["13才-17才", "18才-24才", "25才-34才", "35才-44才", "45才-54才", "55才-64才", "65+"], //データ項目のラベル datasets: [{ backgroundColor: [ "#00FF3B", "#FFFF33", "#00ECFF", "#5507FF", "#FF0461", "#FF88FF", "#AAAAAA" ], data: [gon.profile.youtube_age1, gon.profile.youtube_age2, gon.profile.youtube_age3, gon.profile.youtube_age4, gon.profile.youtube_age5,gon.profile.youtube_age6,gon.profile.youtube_age7] //グラフのデータ }] }, options: { title: { display: true, //グラフタイトル text: '' } } }); </script> 【HTML】 <script> new Chart(document.getElementById('youtubegender'), { type: 'horizontalBar', data: { labels: [""], datasets: [ { label: "男性", data: [gon.profile.youtube_man,], backgroundColor: "rgba(19, 111, 255, 1)" }, { label: "女性", data: [gon.profile.youtube_woman], backgroundColor: "rgba(255, 0, 51, 1)" } ] }, options: { scales: { xAxes: [{stacked: true}], yAxes: [{stacked: true}] } } }); </script> 【HTML】 <canvas id="myYoutubeChart" width="100" height="30"></canvas> <%= render "shared/chart" %> </div> また、タブで切り替えも行っています 【JQuery】 $(function() { let tabs = $(".tab"); // tabのクラスを全て取得し、変数tabsに配列で定義 $(".tab").on("click", function() { // tabをクリックしたらイベント発火 $(".active").removeClass("active"); // activeクラスを消す $(this).addClass("active"); // クリックした箇所にactiveクラスを追加 const index = tabs.index(this); // クリックした箇所がタブの何番目か判定し、定数indexとして定義 $(".content").removeClass("show").eq(index).addClass("show"); // showクラスを消して、contentクラスのindex番目にshowクラスを追加 }) })

試したこと

canvas内のidの後にstyleを使用して高さと幅を指定しても変化無し

イメージ説明

イメージ説明

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

firegrape

2020/10/14 11:10

マウスオーバーしたときの部分のソースはのっていますか?
sayaka1001

2020/10/14 12:01

お返事ありがとうございます。 htmlで記載していてもマウスオーバした時は下記になります。 横棒グラフ <canvas id="youtubegender" width="2880" height="2504" class="chartjs-render-monitor" style="display: block; height: 1252px; width: 1440px;"></canvas> 円グラフ <canvas id="myYoutubeChart" width="2880" height="1584" class="chartjs-render-monitor" style="display: block; height: 792px; width: 1440px;"></canvas> になります。 また、render先の記載は投稿させていただいた記載になります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問