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>
回答1件
あなたの回答
tips
プレビュー