Javascript Can'；t在不同选项卡中呈现多个响应画布图

我的页面的不同选项卡（引导导航选项卡）中有不同的图形。当我将图形设置为响应时，非活动选项卡的宽度和高度属性计算为零，因此不呈现非活动图形。我试图在单击事件上定义和呈现图形，但这不起作用

jsFiddle：

风险值数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“红色”，
strokeColor：“红色”，
点颜色：“红色”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“红色”，
数据：[40,35,38,40,35,40，]
}
]
};
变量数据2={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“红色”，
strokeColor：“红色”，
点颜色：“红色”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“红色”，
数据：[25,25,25,25,35,25，]
}
]
};
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var ctx2=document.getElementById（“myChart2”）.getContext（“2d”）；
var myLineChart=新图表（ctx）.Line（数据，{responsive:true}）；
var myLineChart2=新图表（ctx2）.Line（数据2，{responsive:true}）；

如何解决这个问题

---

谢谢

每次切换选项卡时，似乎都需要重新绘制图表。 如果您只是调整窗口大小，您将看到正在呈现的图表

---

调用一些触发器来销毁myLineChart2，然后再次初始化它。

我编辑了you fiddle以使其工作（在引导程序2中）。将选项卡上的图表呈现为@rukimira。

<ul class="nav nav-pills">
    <li class="active"><a data-toggle="tab" href="#one" class="blue-tabs">One</a></li>
    <li><a data-toggle="tab" href="#two" class="blue-tabs">Two</a></li>

<div class="tab-content">

    <div id="one" class="tab-pane fade in active">
        <canvas id="myChart" width="200" height="100"></canvas>
    </div>

    <div id="two" class="tab-pane fade">
        <canvas id="myChart2" width="200" height="100"></canvas>
    </div>

</div>


var data = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "red",
            strokeColor: "red",
            pointColor: "red",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "red",
            data: [40, 35, 38, 40, 35, 40,]
        }
    ]
};

var data2 = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "red",
            strokeColor: "red",
            pointColor: "red",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "red",
            data: [25, 25, 25, 25, 35, 25,]
        }
    ]
};

var ctx = document.getElementById("myChart").getContext("2d");
var ctx2 = document.getElementById("myChart2").getContext("2d");

var myLineChart = new Chart(ctx).Line(data, { responsive: true });
var myLineChart2 = new Chart(ctx2).Line(data2, { responsive: true });