0
不正確顯示jQuery多個選項卡上的canvasjs.com圖表，但是當我使用寬度att問題已解決，但隨後圖表不能正常響應！不正確顯示jQuery多個選項卡上的canvasjs圖表
$('[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("chartContainer", {
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 piechart1 = new CanvasJS.Chart("piechart1", {
title: {
text: "Top Categoires of New Year's Resolution"
},
exportFileName: "Pie Chart",
exportEnabled: true,
animationEnabled: true,
legend: {
verticalAlign: "bottom",
horizontalAlign: "center"
},
data: [{
type: "pie",
showInLegend: true,
toolTipContent: "{legendText}: <strong>{y}%</strong>",
indexLabel: "{label} {y}%",
dataPoints: [{
y: 35,
legendText: "Health",
exploded: true,
label: "Health"
}, {
y: 20,
legendText: "Finance",
label: "Finance"
}, {
y: 18,
legendText: "Career",
label: "Career"
}, {
y: 15,
legendText: "Education",
label: "Education"
}, {
y: 5,
legendText: "Family",
label: "Family"
}, {
y: 7,
legendText: "Real Estate",
label: "Real Estate"
}]
}]
});
piechart1.render();
var chart2 = new CanvasJS.Chart("chart2", {
title: {
text: "Top "
},
exportFileName: "Pie Chart",
exportEnabled: true,
animationEnabled: true,
legend: {
verticalAlign: "bottom",
horizontalAlign: "center"
},
data: [{
type: "pie",
showInLegend: true,
toolTipContent: "{legendText}: <strong>{y}%</strong>",
indexLabel: "{label} {y}%",
dataPoints: [{
y: 35,
legendText: "Health",
exploded: true,
label: "Health"
}, {
y: 20,
legendText: "Finance",
label: "Finance"
}, {
y: 18,
legendText: "Career",
label: "Career"
}, {
y: 15,
legendText: "Education",
label: "Education"
}, {
y: 5,
legendText: "Family",
label: "Family"
}, {
y: 7,
legendText: "Real Estate",
label: "Real Estate"
}]
}]
});
chart2.render();.tab {
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;
}
.tabs a {
text-decoration:none;
color:#555555!important;
text-shadow: 0 1px 0 white;
}
.tab.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;
}
.tab.active:hover {
background: #fff;
color:#222;
text-decoration:none;
}
.tab:hover {
background: #F2F2F2;
color:#222;
text-decoration:none;
}
.tabcontent {
display:none;
border-top:5px solid #f8f8f8;
clear:both;
}
.tabcontent.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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div class="tabs">
<a href="#" data-tab="1" class="tab active">line</a>
<a href="#" data-tab="2" class="tab">pie</a>
<a href="#" data-tab="3" class="tab">pie2</a>
<div data-content='1' class='tabcontent active'>
<div id="chartContainer" style="height: 300px;direction:ltr;"></div>
</div>
<div data-content='2' class='tabcontent'>
<div id="piechart1" style="width:100%!important;height: 500px; direction:ltr;"></div>
</div>
<div data-content='3' class='tabcontent'>
<div id="chart2" style="width:100%;height: 500px; direction:ltr;"></div>
</div>
</div>
沒有人幫助我嗎？ – Kral