chart.jsを利用時、ボタンクリックで凡例を消し、再描写したいが上手くいきません。

chart.jsを利用し、円グラフを作成しました。
オプションの更新として、参考ドキュメントを読みつつ、teratailにあった似たような質問を参考に自身でサンプルを作ってみたのですが、上手くいきません。

具体的にはボタンをクリックすると、凡例が消されたグラフが再描写され、もう一度ボタンをクリックすると、凡例の表示されているグラフを再描写したいです。

ところが、ボタンクリックで凡例を消す事は出来るのですが、もう一度のクリックで元のグラフを際描写する事ができません。
詳しい方がいれば教えて頂きたいです。

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta http-equiv="X-UA-Compatible" content="IE=edge">
5    <meta charset="utf-8">
6    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.1/dist/Chart.min.js"></script>
7</head>
8<body>
9    <!-- <script src="js/scripts.js"></script> -->
10    <canvas id='CircleChart'></canvas>
11    <button type="button" value="Check" onclick='update(CircleChart)'>凡例を隠す</button>
12    <script>
13        function update(chart) {
14            chart.options = {
15                  legend: {
16                      display: false
17                  }
18            }
19            chart.update();
20        }
21        var ctx = document.getElementById("CircleChart");
22        var CircleChart = new Chart(ctx, {
23            type: 'pie',
24            data: {
25                labels: ["A", "B", "C"],
26                datasets: [{
27                    data: [4, 2, 2]
28                }]
29            },
30            options: {
31                legend: {
32                    display: true
33                }
34            }
35        });
36    </script>
37</body>
38</html>

kei344

2019/12/30 20:39

「再描写」についてご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

退会済みユーザー

2020/01/03 03:37

kei344さん、追記の件気付かず、質問しっぱなしで大変申し訳ございませんでした。

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

回答1件

ベストアンサー

現在だと常にfalseなので表示されないのだと思います。
こんな風に反転してみるとどうでしょうか。

javascript
1let isDisplay = false;
2
3function change() {
4    isDisplay = !isDisplay;
5}
6
7function update(chart) {
8    change();
9    chart.options = {
10        legend: {
11            display: isDisplay
12        }
13    }
14
15　　　chart.update();
16}
17

投稿2020/01/03 02:13

編集2020/01/03 03:58

madone99

総合スコア1855

kei344

2020/01/03 03:19

To: madone99さん isDisplayを反転させて渡しても参照している変数は変わらないのでは？

madone99

2020/01/03 03:35 編集

kei344様、ご指摘ありがとうございます。失礼しました。修正しましたが無名関数で書けるものでしょうか？

kei344

2020/01/03 03:32

To: madone99さん実際の環境を再現していないので確実なことはいえませんが、反転という部分は問題ないと思います。

madone99

2020/01/03 03:33

そうなんですね！ありがとうございます。

退会済みユーザー

2020/01/03 03:44

kei344さん madone99さんお二方ともアドバイス有り難うございます。また、投げっ放しの質問になってしまいすいません。頂いたアドバイスを元に試してみたいと思います！

退会済みユーザー

2020/01/03 03:55

本来ならkei344さんの言うように何がどう分からないのか記述する必要があるのかもしれませんが、現在の私のレベルが低すぎて、それさえも思うように出来ないと言う体たらくでございます。お恥ずかしい限りです。 madone99さんのアドバイスを元に修正してみたのですが、今度はグラフの描写が行われなくなってしまいました。大変申し訳ないのですが、何か分かる事がありましたら教えて頂けると非常に助かります。

madone99

2020/01/03 03:59

提示したコードでchart.update()以下を省略したからかも知れません。コードを修正しました。

退会済みユーザー

2020/01/03 04:14

madone99さん有り難うございました。解決しました。色々とお手数かけてすいませんでした。もっと１から勉強します。

退会済みユーザー

2020/01/03 04:31

度々すいません。あと、凡例を隠してる時に表示するボタンを「凡例を表示」と言ったボタンに変える事は可能でしょうか？おんぶに抱っこで申し訳ないです。

madone99

2020/01/03 06:23 編集

isDisplayが条件ままですので、それに合わせてtrue,falseでボタンテキストを切り替えるだけで出来そうです。