为什么不在选项卡中拉伸我的 canvasjs 图表

Question

我使用 Canvasjs 绘制图表，我在选项卡中绘制了 3 个图表，但只有活动选项卡中的图表是拉伸的。

我的 html、jquery 和 CSS 以及 canvasjs 代码：我使用来自 http://jsfiddle.net/3297x4ef/

的代码

window.onload = function () 

{
$('[data-tab]').on('click', function (e) {
   
        $(this)
          .addClass('active')    
          .siblings('[data-tab]')
          .removeClass('active')
          .siblings('[data-content=' + $(this).data('tab') + ']')
          .addClass('active')
          .siblings('[data-content]')
          .removeClass('active');
        e.preventDefault();
      });
      //---------------------------------------
var chart = new CanvasJS.Chart("chartContainer555",
  {

   title:{
    text: "line",
    fontFamily: "tahoma",
    fontSize: 15
   },
            animationEnabled: true,
   axisX:{
    gridColor: "Silver",
    tickColor: "silver",
    interval: 1,
    labelAngle: -70

   },                        
             toolTip:{
                shared:true,
    fontStyle: "normal",
    fontFamily: "tahoma"
              },
   theme: "theme2",
   axisY: {
    gridColor: "Silver",
    tickColor: "silver"
    
   },
   data: [
   {        
    type: "area",
    showInLegend: true,
    lineThickness: 2,
    name: "stats",
    markerType: "square",
    color: "#F08080",
    dataPoints: [
    { x: new Date(2010,0,3), y: 650 },
    { x: new Date(2010,0,5), y: 700 },
    { x: new Date(2010,0,7), y: 710 },
    { x: new Date(2010,0,9), y: 658 },
    { x: new Date(2010,0,11), y: 734 },
    { x: new Date(2010,0,13), y: 963 },
    { x: new Date(2010,0,15), y: 847 },
    { x: new Date(2010,0,17), y: 853 },
    { x: new Date(2010,0,19), y: 869 },
    { x: new Date(2010,0,21), y: 943 },
    { x: new Date(2010,0,23), y: 970 }
    ]
    
   },
   {        
    type: "area",
    showInLegend: true,
    name: "hits",
    color: "#20B2AA",
    lineThickness: 2,
    dataPoints: [
    { x: new Date(2010,0,3), y: 510 },
    { x: new Date(2010,0,5), y: 560 },
    { x: new Date(2010,0,7), y: 540 },
    { x: new Date(2010,0,9), y: 558 },
    { x: new Date(2010,0,11), y: 544 },
    { x: new Date(2010,0,13), y: 693 },
    { x: new Date(2010,0,15), y: 657 },
    { x: new Date(2010,0,17), y: 663 },
    { x: new Date(2010,0,19), y: 639 },
    { x: new Date(2010,0,21), y: 673 },
    { x: new Date(2010,0,23), y: 660 }
    ]
   }

   
   ],
          legend:{
            cursor:"pointer",
   verticalAlign: "bottom",
   horizontalAlign: "center",
   fontFamily: "tahoma",
            itemclick:function(e){
              if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
               e.dataSeries.visible = false;
              }
              else{
                e.dataSeries.visible = true;
              }
              chart.render();
            }
          }
  });

chart.render();

var chart3 = new CanvasJS.Chart("piechart1",
  {

   title:{
    text: "line",
    fontFamily: "tahoma",
    fontSize: 15
   },
            animationEnabled: true,
   axisX:{
    gridColor: "Silver",
    tickColor: "silver",
    interval: 1,
    labelAngle: -70

   },                        
             toolTip:{
                shared:true,
    fontStyle: "normal",
    fontFamily: "tahoma"
              },
   theme: "theme2",
   axisY: {
    gridColor: "Silver",
    tickColor: "silver"
    
   },
                        height: 300,
                        
   data: [
   {        
    type: "area",
    showInLegend: true,
    lineThickness: 2,
    name: "stats",
    markerType: "square",
    color: "#F08080",
    dataPoints: [
    { x: new Date(2010,0,3), y: 650 },
    { x: new Date(2010,0,5), y: 700 },
    { x: new Date(2010,0,7), y: 710 },
    { x: new Date(2010,0,9), y: 658 },
    { x: new Date(2010,0,11), y: 734 },
    { x: new Date(2010,0,13), y: 963 },
    { x: new Date(2010,0,15), y: 847 },
    { x: new Date(2010,0,17), y: 853 },
    { x: new Date(2010,0,19), y: 869 },
    { x: new Date(2010,0,21), y: 943 },
    { x: new Date(2010,0,23), y: 970 }
    ]
    
   },
   {        
    type: "area",
    showInLegend: true,
    name: "hits",
    color: "#20B2AA",
    lineThickness: 2,
    dataPoints: [
    { x: new Date(2010,0,3), y: 510 },
    { x: new Date(2010,0,5), y: 560 },
    { x: new Date(2010,0,7), y: 540 },
    { x: new Date(2010,0,9), y: 558 },
    { x: new Date(2010,0,11), y: 544 },
    { x: new Date(2010,0,13), y: 693 },
    { x: new Date(2010,0,15), y: 657 },
    { x: new Date(2010,0,17), y: 663 },
    { x: new Date(2010,0,19), y: 639 },
    { x: new Date(2010,0,21), y: 673 },
    { x: new Date(2010,0,23), y: 660 }
    ]
   }

   
   ],
          legend:{
            cursor:"pointer",
   verticalAlign: "bottom",
   horizontalAlign: "center",
   fontFamily: "tahoma",
            itemclick:function(e){
              if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
               e.dataSeries.visible = false;
              }
              else{
                e.dataSeries.visible = true;
              }
              chart.render();
            }
          }
  });

chart3.render();

}

.tab5 {
text-decoration:none; 
border-radius: 4px 4px 0 0;
font-family: tahoma;
font-size: 9pt;
cursor: pointer;
display: inline;
margin: 10px 1px 1px 4px;
float: right;
padding: 5px 9px;
background: #E4E4E4;
border: 1px solid #CCC;
z-index: 1;
white-space: nowrap;
position: relative;
top: 1px;
text-shadow: 0 1px 0 white;
}
.tabs5 a{
text-decoration:none; 
color:#555555!important;
text-shadow: 0 1px 0 white;
}
.tab5.active{
background: #FFF;
border-radius: 4px 4px 0 0;
border: 1px solid #B9B9B9;
border-bottom: 0px;
z-index: 3;
padding: 5px 9px;
margin: 10px 0px 0px 4px;
top: 1px;
}
.tab5.active:hover {
 background: #fff;
 color:#222;
 text-decoration:none;
}
.tab5:hover {
 background: #F2F2F2;
 color:#222;
 text-decoration:none;
}
.tabcontent5 {
   display:none;
 border-top:5px solid #f8f8f8;
    clear:both; 
}
.tabcontent5.active {
    display:block!important;
 padding:10px!important;
 background:#fff;
 border: 1px solid #B9B9B9;
 border-radius: 4px 0 4px 4px;
 z-index: 2;
position: relative;
top: -2px;
color: #000;
font-family: tahoma;
font-size: 9pt;
margin:15px 0;
}

<div class="tabs5">
<a href="#" data-tab="1" class="tab5 active">line</a>
<a href="#" data-tab="2" class="tab5">pie</a>
<a href="#" data-tab="3" class="tab5">pie2</a>
    <div data-content='1' class='tabcontent5 active'>
        <div id="chartContainer555"  style="height: 300px;direction:ltr;"></div>
    </div>
    <div data-content='2' class='tabcontent5'>
        <div id="piechart1"  style="height: 300px;direction:ltr; max-height: 300px;"></div>
    </div>
    <div data-content='3' class='tabcontent5'>
        <div id="chart2" style="width:100%;height: 500px; direction:ltr;"></div>
    </div>

和我的图表显示图片：

Answer 1

您需要重新初始化 $('[data-tab]').on('click', function(e) {}.

中的图表

$('[data-tab]').on('click', function (e) {
    $(this)
        .addClass('active')       
        .siblings('[data-tab]')
        .removeClass('active')
        .siblings('[data-content=' + $(this).data('tab') + ']')
        .addClass('active')
        .siblings('[data-content]')
        .removeClass('active');
    e.preventDefault();

    if ($(this).data('tab') === 2) {   //for initializing pieChart1
        piechart = new CanvasJS.Chart("piechart1", pieChart1);
        piechart.render();
    }

    if ($(this).data('tab') === 3) {    //for initializing piechart2
       piechart = new CanvasJS.Chart("piechart2", piechart2);
       piechart.render();
    }
});

请看这个fiddle - http://jsfiddle.net/hba443g6/

为什么不在选项卡中拉伸我的 canvasjs 图表

why not stretch my canvasjs chart in tab

javascript

jquery

html

css

canvasjs