为什么不在选项卡中拉伸我的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]'）中的图表。（'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();
    }
});

请看一下这个小提琴 - http://jsfiddle.net/hba443g6/