Как сделать таблицу Canvas JS отзывчивой во вкладке?

Привет, у меня есть две загрузочные вкладки, в которых во второй вкладке я показываю линейную диаграмму холста js. Диаграмма не охватывает весь экран до тех пор, пока высота и ширина не будут установлены в самой диаграмме jvas canvas, которая сломает responsivenes. График получения отображается без высоты и ширины в графике: -Как сделать таблицу Canvas JS отзывчивой во вкладке?

код для вкладок: -

<div class="tabbable"> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a href="#s1" data-toggle="tab">Tab 1</a></li> 
     <li><a href="#s2" data-toggle="tab">Tab 2</a></li> 
    </ul> 

    <div class="panel panel-flat"> 
     <div class="panel-body"> 
      <div class="tab-content"> 
       <div class="tab-pane" id="s1"> 
        <div class="row"> 
         <div class="col-md-12"> 
          A table is shown in first tab 
         </div> 
        <div>      
       </div> 

       <div class="tab-pane" id="s2"> 
        <div class="row"> 
         <div class="col-md-12"> 
          <div id="chartContainer" style="height: 365px !important; width: 100% !important;"></div> 
         </div> 
        <div>      
       </div> 
      </div> 
     <div>      
    </div> 
    </div>

Javascript для диаграммы: -

<script type="text/javascript"> 
window.onload = function() { 

    var chart = new CanvasJS.Chart("chartContainer", 
    { 

     title:{ 

     }, 
     animationEnabled: true, 
     axisX:{ 

      gridColor: "Silver", 
      tickColor: "silver", 
      interval: 1 

     },       
        toolTip:{ 
         shared:true 
        }, 
     theme: "theme2", 
     axisY: { 
      gridColor: "Silver", 
      tickColor: "silver" 
     }, 
     legend:{ 
      verticalAlign: "center", 
      horizontalAlign: "right" 
     }, 

     data: [ 
     {   
      type: "line", 
      markerType: "square", 
      color: "#F08080", 
      dataPoints: [ 
      { x: 1, y: 6.7 }, 
      { x: 2, y: 8.0 }, 
      { x: 3, y: 7.10 }, 
      { x: 4, y: 8.58 }, 
      { x: 5, y: 9.34 }, 
      { x: 6, y: 6.63 }, 
      { x: 7, y:7.47 }, 
      { x: 8, y: 8.53 }, 

      ] 
     } 
     ], 
     }); 

     chart.render(); 
     } 
    </script>

I был бы очень благодарен, если кто-нибудь может помочь мне в создании диаграммы в полной ширине на вкладке без установки высоты и ширины в самой диаграмме. Любая помощь высоко ценится.

источник

2016-11-01 Kushal Srivastava

Кажется, что родительский контейнер не имеет своих размеров к моменту создания диаграммы. Можете ли вы убедиться, что сценарий инициализации диаграммы (соответственно рендер) находится внизу страницы и поместил его с тайм-аутом в несколько секунд, чтобы определить, действительно ли это проблема? –

CanvasJS Chart автоматически устанавливает высоту и ширину диаграммы в соответствии с размерами контейнера. Если значения для контейнера не установлены, они принимают значения по умолчанию.

В начальной загрузке, так как вторая вкладка не отображается первоначально, диаграмма принимает значения по умолчанию. Чтобы решить эту проблему, второй график должен отображаться, когда событие shown.bs.tab запускается при загрузке.

$('#bs-tab2').on("shown.bs.tab",function(){ 
    chartTab2(); 
    $('#bs-tab2').off(); // to remove the binded event after the initial rendering 
});

Проверьте это jsfiddle.

источник

2016-11-01 21:21:59

Спасибо, что это сработало. –

Как сделать таблицу Canvas JS отзывчивой во вкладке?

ответ

Смежные вопросы