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

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

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

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

JavaScript

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

Q&A

1回答

667閲覧

JavaScript Chart.jsについて詳しい方いますか?

chatjs

総合スコア0

Chart.js

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

JavaScript

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

0グッド

0クリップ

投稿2021/03/25 14:08

編集2021/03/25 14:09

前提・実現したいこと

Chart.jsでグラフを作っています
下記コードの上部に表示されてる得点の表示を非表示、
下部の300などの数値の表示を非表示にしたいです
//label: '得点',
//data: [880, 740, 900, 520, 930],
コメントアウトしてみましたが、非表示にできません
この部分は非表示にできないのでしょうか?

該当のソースコード

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <style> #ex_chart {max-width:640px;max-height:480px;} </style> <canvas id="ex_chart"></canvas> <script> var ctx = document.getElementById('ex_chart'); var data = { labels: ["平成26年", "平成27年", "平成28年", "平成29年", "平成30年"], datasets: [{ label: '得点', data: [880, 740, 900, 520, 930], backgroundColor: 'rgba(255, 100, 100, 1)' }] }; var options = { scales: { xAxes: [{ ticks: { min: 300 } }] } }; var ex_chart = new Chart(ctx, { type: 'horizontalBar', data: data, options: options }); </script>

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

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

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

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

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

m.ts10806

2021/03/25 21:28

タイトルに内容がないです。 起きてる問題、実現したい機能の概要を記載してください(要件) https://teratail.com/help/question-tips#questionTips3-1 要件とタグと質問内容をきちんと書けば「詳しい人」は見に来ます。 「詳しい人いますか?」では何を聞きたいのか分かりません。
guest

回答1

0

legendのdisplayをfalseに、
xAxesのticksのdisplayをfalseに設定します。

diff

1<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> 2 3<style> 4#ex_chart {max-width:640px;max-height:480px;} 5</style> 6 7<canvas id="ex_chart"></canvas> 8 9<script> 10var ctx = document.getElementById('ex_chart'); 11 12var data = { 13 labels: ["平成26年", "平成27年", "平成28年", "平成29年", "平成30年"], 14 datasets: [{ 15 label: '得点', 16 data: [880, 740, 900, 520, 930], 17 backgroundColor: 'rgba(255, 100, 100, 1)' 18 }] 19}; 20var options = { 21+ legend: { 22+ display: false 23+ }, 24 scales: { 25 xAxes: [{ 26 ticks: { 27 min: 300, 28+ display: false 29 } 30 }] 31 } 32}; 33 34var ex_chart = new Chart(ctx, { 35 type: 'horizontalBar', 36 data: data, 37 options: options 38}); 39</script>

投稿2021/03/25 14:13

編集2021/03/25 14:14
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

chatjs

2021/03/25 14:17

回答ありがとうございます。 無事に非表示にできました。ありがとうございます。 グラフをホバーすると出てくる数値も非表示にしたいのですが可能でしょうか?
退会済みユーザー

退会済みユーザー

2021/03/25 14:34

options{}の中に tooltips:{ enabled: false } を入れると非表示にできます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問