【发布时间】：2015-03-24 17:06:37
【问题描述】：
我正在尝试在选项卡系统中使用 ChartsJS。渲染第一个选项卡中的第一个图表，但不渲染后续图表。
我相信这是因为标签有display:none，所以当图表第一次生成时，它们是在一个零维度的 div 中创建的。
这解决了问题，但打破了标签：
.vertical-nav>div.tab-content {
display: block !important;
}
考虑到这一点，我尝试了各种方法来在选项卡打开后重新生成图表，或者在生成图表之前强制display:block。没有任何效果。
这是我重新生成图表的尝试：
jQuery(document).ready(function() {
jQuery('.vertical-nav ul li span').click(function(){
// Target the canvas within the correct tab
var tabIndex = jQuery(this).parent().index();
var canvasID = jQuery('.vertical-nav .tab-content:eq( ' + tabIndex + ' ) canvas').attr('id');
theChart = charts[canvasID].chart;
builtChart = charts[canvasID].builtChart;
// Destroy all of the charts so that we can rebuild them
for (var key in charts) {
if (charts.hasOwnProperty(key)) {
charts[key].builtChart.destroy();
}
}
// get the chart data and options from the charts object
newData = charts[canvasID].data;
newOptions = charts[canvasID].options;
// create the new chart
newChart = document.getElementById(canvasID).getContext("2d");
new Chart(newChart).Line(newData, newOptions);
});
})
暂存站点为：http://telcomplusplc.uberleaf.com/company/?tab=our-growth
我什至尝试设置超时以延迟图表生成，直到显示选项卡，但没有运气。
您可以在上面的 URL 中看到，第一个图表按应有的方式生成和重新生成。只是其他人没有（大概是因为他们在第一代使用display:none div）。
非常感谢任何帮助。如果需要，很乐意提供更多信息。
更新
调整窗口大小时，图表会重新绘制。这是代码（在chart.js中）：
// Attach global event to resize each chart instance when the browser resizes
helpers.addEvent(window, "resize", (function(){
// Basic debounce of resize function so it doesn't hurt performance when resizing browser.
var timeout;
return function(){
clearTimeout(timeout);
timeout = setTimeout(function(){
each(Chart.instances,function(instance){
// If the responsive flag is set in the chart instance config
// Cascade the resize event down to the chart.
if (instance.options.responsive){
instance.resize(instance.render, true);
}
});
}, 50);
};
})());
我认为我需要的是能够通过点击功能触发它。我试了一次失败，我的JS技术不是很好。
【问题讨论】：
-
在您的代码中，您在这一行中使用了
newChart变量new Chart(newChart).Line(newData, newOptions);，但我在您的代码中没有找到它，也许您可以使用chartjs 文档中的update()方法@987654322 @
标签： javascript jquery tabs chart.js