图表js图表在bootstrap手风琴面板内消失了

Question

关于在bootstrap手风琴中显示chartsjs canvas元素我有一个奇怪的问题。场景是我必须在桌面模式下显示6种类型的图表作为3 * 2（网格视图），在移动视图中显示为6行（内部引导手风琴面板）。我尝试使用两个div元素，一个用于移动，另一个用于桌面和写入媒体查询仅在移动视图上显示手风琴但在桌面模式下显示正常的网格视图。我没有看到桌面模式的任何问题，但在移动视图上第一次所有图表都正确呈现但在所有6个图表上多次点击我看到那张图表正在消失。你能帮我解决这个问题。

//适用于移动视图

//html code

<div id="mobileRadarView">
<div class="panel panel-default" id="panelOne">
<div class="panel-heading" role="tab" id="headingOne">
  <h4 class="panel-title" >
      Chart1
    <a id="chart1Collapse" class="collapsed"  style="color:#fff;text-decoration:none;float:right" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><span style="color:white;" class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a>
  </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
  <div class="panel-body">
        <div class="col-md-6 col-xs-12">
              <canvas id="chart1" height="400" width="600"></canvas> 
        </div>
      </div>
    </div>
   </div>
</div>
</div>

//Javascript code

 var data = {
            labels: ["X","Y","Z"],
        datasets: [
        {
        label: "DATASET1",
        fillColor: "rgba(63,169,245,.1)",
        strokeColor: "rgba(63,169,245,1)",
        pointColor : "rgba(151,187,205,1)",
        pointStrokeColor : "#fff",
        pointHighlightFill: "#FA8585",
        pointHighlightStroke: "rgba(220,220,220,1)", 
        data: [10,20,30]
        },
        {
            label: "DATASET2",
             fillColor: "rgba(255,196,203,.1)",
             strokeColor: "rgba(255,196,203,1)",
             pointColor: "rgba(243,101,117,1)",
             pointStrokeColor: "#fff",
             pointHighlightFill: "#FA8585",
            pointHighlightStroke: "rgba(220,220,220,1)", 
            data: [40,50,60]    
        },
        {
            label: "DATASET3",
            fillColor: "rgba(156,250,179,.1)",
            strokeColor: "rgba(77,246,119,1)",
            pointColor: "rgba(52,245,100,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#FA8585",
            pointHighlightStroke: "rgba(220,220,220,1)", 
            data: [35,50,70]    
        }
        ]
        };
        var options={responsive: true,maintainAspectRatio: true};

 $(document).ready(function () {

        $('.panel#panelOne').on('shown.bs.collapse', function () {
           var mobileRadarChart=document.getElementById('chart1').getContext('2d');
          new Chart(mobileRadarChart).Radar(data,options); 
         })
        });

//对于桌面视图

//html code

<div id="desktopRadarView">
<div class="row">
<div class="col-md-6 col-xs-12">
     <canvas id="chart2" ></canvas>
 </div>
</div>

//Javascript code
  //data same as shown in above mobile view code
 var desktopRadarChart = document.getElementById('chart2').getContext('2d');        
        new Chart(desktopRadarChart).Radar(data,options);