Chart.js hiển thị trong tab Bootsrap ẩn

Question

điều này khiến tôi phát điên, tôi đang sử dụng Chart.js trong các tab khởi động nhưng chúng sẽ không hiển thị vì chiều rộng được đặt bằng 0 khi DOM được tải. Cuối cùng tôi đã tìm thấy điều này sau khi thử và tìm ra lý do tại sao biểu đồ của tôi không có ở đó!

Tôi đã tìm kiếm trực tuyến và không có gì để khắc phục sự cố của mình, có thể ai đó giúp tôi với điều này, tôi nghĩ rằng tôi cần một số tập lệnh hiển thị biểu đồ khi tab được chọn và tải thành công Im sử dụng JS:

var data = [ 
{ 
    value: 300, 
    color:"#F7464A", 
    highlight: "#FF5A5E", 
    label: "Red" 
}, 
{ 
    value: 50, 
    color: "#46BFBD", 
    highlight: "#5AD3D1", 
    label: "Green" 
}, 
{ 
    value: 100, 
    color: "#FDB45C", 
    highlight: "#FFC870", 
    label: "Yellow" 
} 
]; 
var options = { 
    responsive : true, 
    animation: true, 
}; 

var ctx1 = $("#invest-chart").get(0).getContext("2d"); 
var invest_chart; 
new Chart(ctx1).Doughnut(data, { 
    responsive : true, 
    animation: true, 
}); 

Cùng với điều này mảnh html trong tab của tôi:

<canvas id="invest-chart"></canvas> 

Thanks guys!

Answer 1

Bạn cần gọi biểu đồ sau khi tab được hiển thị. Bootstrap cung cấp các sự kiện trên các plugin javascript của họ mà bạn có thể xem với một jquery trên sự kiện.

$('a[href=#chart]').on('shown.bs.tab', function(){ 
    var data = [ 
    { 
    value: 300, 
    color:"#F7464A", 
    highlight: "#FF5A5E", 
    label: "Red" 
    }, 
    { 
    value: 50, 
    color: "#46BFBD", 
    highlight: "#5AD3D1", 
    label: "Green" 
    }, 
    { 
    value: 100, 
    color: "#FDB45C", 
    highlight: "#FFC870", 
    label: "Yellow" 
    } 
]; 
var options = { 
    responsive : true, 
    animation: true, 
}; 
var ctx1 = $("#invest-chart").get(0).getContext("2d"); 
var invest_chart; 
new Chart(ctx1).Doughnut(data, { 
    responsive : true, 
    animation: true, 
}); 
}); 

http://codepen.io/anon/pen/bdGrKv