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

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

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

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

Q&A

解決済

1回答

1743閲覧

Chart.jsでチェックボックスの値でグラフの表示・非表示を切り替えたい

IC445

総合スコア24

JavaScript

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

0グッド

0クリップ

投稿2019/01/06 01:45

編集2019/01/06 02:09

Chart.jsを使っています。
チェックボックスを使って、グラフの表示を切り替えを行いたいと考えています。
グラフの項目ではなく、グラフ自体の表示・非表示を切り替える形です。

追記
チェックボックスのチェックが入っている場合、グラフを表示して、
入っていない場合、グラフを非表示にしたいと考えています。
更新タイミングはチェックボックスのチェックに変化があったタイミングです。

コードは下記の抜粋です。
https://www.weblog-life.net/entry/chartjs_embed

よろしくお願いいたします。

JavaScript

1<body> 2<input type="checkbox" name="line1" value="yes">Checkboxでグラフ表示切り替え <!-- このチェックボックスの値でグラフの表示を切り替える --> 3 4<canvas id="myChart2" width="400" height="250"></canvas> 5<script> 6var ctx = document.getElementById("myChart2"); 7var data = { 8 labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31], 9 datasets: [ 10 { 11 label: "ページビュー", 12 fill: false, 13 lineTension: 0.1, 14 backgroundColor: "rgba(75,192,192,0.4)", 15 borderColor: "rgb(5,141,199)", 16 borderCapStyle: 'butt', 17 borderDash: [], 18 borderDashOffset: 0.0, 19 borderJoinStyle: 'miter', 20 pointBorderColor: "rgb(5,141,199)", 21 pointBackgroundColor: "#fff", 22 pointBorderWidth: 1, 23 pointHoverRadius: 5, 24 pointHoverBackgroundColor: "rgba(75,192,192,1)", 25 pointHoverBorderColor: "rgba(220,220,220,1)", 26 pointHoverBorderWidth: 2, 27 pointRadius: 1, 28 pointHitRadius: 10, 29 data: [163,170,150,157,163,207,279,297,204,334,211,228,270,340,267,268,253,200,246,262,267,338,344,369,338,316,273,394,346,398,438], 30 spanGaps: false, 31 } 32 ] 33}; 34var myChart = new Chart(ctx, { 35 type: 'line', 36 data: data 37}); 38 39</script> 40</body> 41</html>

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

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

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

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

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

m.ts10806

2019/01/06 01:52

相手がcanvasでなければできるということでしょうか? 今の状態ですとやりたいことに対して何を取り組んだかわからない(もしくは何もしていない)ので丸投げです
m.ts10806

2019/01/06 02:11

具体的に指摘した方が良かったですね。 「自身が調べた内容、試した内容を記載しないと丸投げです。」 何もしていないのであればまず調べてください。少し細分化すれば調べて何も出てこない内容ではありません。
guest

回答1

0

ベストアンサー

  1. チェックボックスのonChangeイベントでチェックされているかどうかを取得
  2. getElementByIdなどでcanvasを取得
  3. チェックされていたらcanvasを表示し、チェックされていなかったらcanvasを非表示にする

という流れになりますね。
具体的に何がわからなくて詰まってるのか書かれていないので大まかに回答しておきます。

投稿2019/01/07 02:27

dice142

総合スコア5158

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問