chart.jsを利用してレーダーチャートを表示させたいです。
ですが、canvasのwidthとheightが0になってしまい、表示されません。
現状
タブを利用しており、最初はdisplay:none;の部分にcanvasがあるため、
該当するタブがdisplay:block;になるときに、
canvasに描画する処理を行っております。
該当コード
<div style="height:500px;"> <canvas id="chart"></canvas> </div> $(function(){ $("#tab_2").on("click" , function(){ chartView(); }); }); function chartView(){ var data = {...} var ctx = $("#chart").getContext("2d"); var chart = new Chart(ctx).Radar(data , { multiTooltipTemplate:"...", responsive:true }); }
原因がわからず困っています。
わかる方、ご教授の程宜しく御願い致します。
追記
canvasの親要素にheightを設定し、
タブをクリックしてから少し時間をおいて描画処理をしたところ表示はされました。
しかし、この方法は無理矢理感があるのでどうにかできないものでしょうか。
宜しく御願い致します。
$(function(){ $("#tab_2").on("click" , function(){ setTimeout(function(){ chartView(); } , 500); }); });
回答1件
あなたの回答
tips
プレビュー