如果在隐藏的 div 中呈现，图表就会消失

Question

我有两个图表（使用 Charts.js 创建），我想通过单击按钮在它们之间进行切换。

最初，我将它们分别放在单独的 div 中，一个隐藏，一个可见，如下所示：

<div id="one">
    <canvas id="myChart1" width="400" height="400"></canvas>
</div>
<div id="two" class="hidden">
    <canvas id="myChart2" width="400" height="400"></canvas>
</div>

如果我删除“隐藏”类，图表将不会显示。

这是一个 JSFiddle： http: //jsfiddle.net/2rzkpzy9/12/

有什么办法可以解决这个问题或其他方法来实现它们之间的交替吗？

<div id="one">
    <canvas id="myChart1" width="400" height="400"></canvas>
</div>
<div id="two" class="hidden">
    <canvas id="myChart2" width="400" height="400"></canvas>
</div>

var data1 = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }]
};
var data2 = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "#FD6260",
            strokeColor: "#FD6260",
            pointColor: "#FD6260",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }]
};

var options = {
    scaleShowGridLines : false,
    scaleShowHorizontalLines: false,
    scaleShowVerticalLines: false,
 }

var cxt = document.getElementById("myChart1").getContext("2d");
var chart = new Chart(cxt).Bar(data1,options);

var cxt2 = document.getElementById("myChart2").getContext("2d");
var chart2 = new Chart(cxt2).Bar(data2,options);
        
swap= function() {
     console.log(document.getElementById("one").className);
     document.getElementById("one").className = "hidden";
     document.getElementById("two").className = '';
    console.log(document.getElementById("one").className);
}

.hidden {
    display: none;
}

Answer 1

我没有使用过 Chart.js，但快速浏览一下代码表明它正在查询 DOM 以获取渲染的高度和宽度。如果包含的 div 被隐藏，则该查询可能返回0。因此隐藏图表的大小可能为 0x0。有关此行为的示例，请参阅https://jsfiddle.net/2rzkpzy9 ：

var width = document.getElementById('myChart').offsetWidth;

document.getElementById('info').innerHTML = width.toString();

.hidden {
    display: none;
}

<div class="hidden">
    <canvas id="myChart" width="400" height="400"></canvas>
</div>

<div id="info"></div>

要解决此问题，您可能可以显式设置宽度和高度（不确定 Chart.js 是否提供了此配置），或者您可以渲染图表然后隐藏该元素 - 不是很优雅，因为您可能会得到闪光。第二个选项的另一个版本是使用类似position: absolute; top: -1000px将“隐藏”div 移出屏幕而不是隐藏的方法display: none。

查看您的小提琴，已更新为在此处使用第二个选项：http://jsfiddle.net/2rzkpzy9/13/ - 似乎有效：

var data1 = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }]
};
var data2 = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "#FD6260",
            strokeColor: "#FD6260",
            pointColor: "#FD6260",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }]
};

var options = {
    scaleShowGridLines : false,
    scaleShowHorizontalLines: false,
    scaleShowVerticalLines: false,
 }

var cxt = document.getElementById("myChart1").getContext("2d");
var chart = new Chart(cxt).Bar(data1,options);

var cxt2 = document.getElementById("myChart2").getContext("2d");
var chart2 = new Chart(cxt2).Bar(data2,options);
        
swap= function() {
     console.log(document.getElementById("one").className);
     document.getElementById("one").className = "hidden";
     document.getElementById("two").className = '';
    console.log(document.getElementById("one").className);
}

.hidden {
    position: fixed;
    top: -1000px;
}

<script src="http://www.chartjs.org/assets/Chart.js"></script>
<div id="one">
    <canvas id="myChart1" width="400" height="400"></canvas>
</div>
<div id="two" class="hidden">
    <canvas id="myChart2" width="400" height="400"></canvas>
</div>
<button type="button" class="btn" onClick="swap()">Swap!</button>
<div id="info"></div>

Answer 2

将其高度设置为 0px 并溢出：隐藏，而不是隐藏非活动选项卡

你的 CSS 可能看起来像这样：

#one, #two
{
height:auto;
overflow:inherit;
}
#one.hidden, #two.hidden
{
height:0;
overflow:hidden;
}