如何在選項卡中使Canvas JS圖表響應？

Question

嗨，我有兩個引導程序選項卡，其中第二個選項卡顯示畫布js折線圖。 在畫布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>

如果有人可以幫助我使圖表在選項卡中以全角顯示而無需在圖表本身中設置高度和寬度，我將不勝感激。 非常感謝您的幫助。

Answer 1

CanvasJS Chart根據容器的尺寸自動設置圖表的高度和寬度。 如果未為容器設置值，則采用默認值。

在引導程序中，由於最初未顯示第二個選項卡，因此圖表采用默認值。 若要解決此問題，當bootstrap觸發show.bs.tab事件時，應呈現第二張圖表。

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

檢查此jsfiddle 。