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