Question

我有两个图表（使用charts.js创建），我想在点击一个按钮之间交替。

最初我把它们分别放在一个隐藏的，一个隐藏的，一个可见的如下：

<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/

有没有办法围绕这种或其他方式接近它们之间的交替？

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;
}

<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 1

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

＆＃13;

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

＆＃13;

.hidden {
    display: none;
}

＆＃13;

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

＆＃13;

要修复，您可以明确设置宽度和高度（不确定Chart.js是否为此提供配置），或者您可以渲染图表并然后隐藏元素 - 不是很优雅，因为你可能会得到一个闪光。第二个选项的另一个版本是使用position: absolute; top: -1000px之类的东西来移动＆＃34;隐藏＆＃34;离屏而不是隐藏display: none。

看到你的小提琴，更新为使用第二个选项：http://jsfiddle.net/2rzkpzy9/13/ - 似乎有效：

＆＃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);
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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

Answer 3

你可以试试这个

swap= function() {
 console.log(document.getElementById("one").className);
 if(document.getElementById("one").className == "hidden"){
 document.getElementById("one").className = '';
 document.getElementById("two").className = 'hidden';
 }else{
 document.getElementById("one").className = 'hidden';
 document.getElementById("two").className = '';
 }

console.log(document.getElementById("one").className);

}

＆＃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);
     if(document.getElementById("one").className == "hidden"){
     document.getElementById("one").className = '';
     document.getElementById("two").className = 'hidden';
     }else{
     document.getElementById("one").className = 'hidden';
     document.getElementById("two").className = '';
     }
     
    console.log(document.getElementById("one").className);
}

＆＃13;

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

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/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>

＆＃13;

如果在隐藏的div中渲染，图表将消失

3 个答案: