如何在选项卡中使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 。