我正在做的这件事真的需要帮助。 基本上我有 4 个由 chartjs 渲染的图表。我制作了 4 个按钮，它们只是显示或隐藏所需的 DIV。我很确定它在 jQuery 端有效，但我不太了解 Chart.js 端发生的情况。
这是一个演示 https://jsfiddle.net/ttum6ppu/
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<p>
<button type="button" class="btn btn-default btn-xs stanza_button" id="stanza" style="display:none;">Per stanza</button>
<button type="button" class="btn btn-primary btn-xs stanza_selected" id="stanza"><i class="fa fa-eye"></i> Per stanza</button>
<button type="button" class="btn btn-default btn-xs settimanale_button" id="settimanale">Andamento settimanale</button>
<button type="button" class="btn btn-primary btn-xs settimanale_selected" id="settimanale" style="display:none;"><i class="fa fa-eye"></i> Andamento settimanale</button>
<button type="button" class="btn btn-default btn-xs mensile_button" id="mensile">Andamento mensile</button>
<button type="button" class="btn btn-primary btn-xs mensile_selected" id="mensile" style="display:none;"><i class="fa fa-eye"></i> Andamento mensile</button>
<button type="button" class="btn btn-default btn-xs annuo_button" id="annuo">Andamento annuo</button>
<button type="button" class="btn btn-primary btn-xs annuo_selected" id="annuo" style="display:none;"><i class="fa fa-eye"></i> Andamento annuo</button>
</p>
<script>
$(document).ready(function(){
$("#stanza").click(function(){
$(".stanza, .stanza_selected, .settimanale_button, .mensile_button, .annuo_button").show();
$(".settimanale, .mensile, .annuo, .stanza_button, .settimanale_selected, .mensile_selected, .annuo_selected").hide();
});
$("#settimanale").click(function(){
$(".settimanale, .settimanale_selected, .stanza_button, .mensile_button, .annuo_button").show();
$(".stanza, .mensile, .annuo, .stanza_selected, .settimanale_button, .mensile_selected, .annuo_selected").hide();
});
$("#mensile").click(function(){
$(".mensile, .mensile_selected, .stanza_button, .settimanale_button, .annuo_button").show();
$(".stanza, .settimanale, .annuo, .stanza_selected, .settimanale_selected, .mensile_button, .annuo_selected").hide();
});
$("#annuo").click(function(){
$(".annuo, .annuo_selected, .stanza_button, .settimanale_button, .mensile_button").show();
$(".stanza, .settimanale, .mensile, .stanza_selected, .settimanale_selected, .mensile_selected, .annuo_button").hide();
});
});
</script>
<div style="width: 50%">
<div style="height:70%;" class="stanza">
<canvas id="canvas" height="100px;"></canvas>
</div>
<div style="height:70%; display: none;" class="settimanale">
<canvas id="canvas2" height="100px;"></canvas>
</div>
<div style="height:70%; display: none;" class="mensile">
<canvas id="canvas3" height="100px;"></canvas>
</div>
<div style="height:70%; display: none;" class="annuo">
<canvas id="canvas4" height="100px;"></canvas>
</div>
</div>
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var barChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,0.8)",
highlightFill : "rgba(151,187,205,0.75)",
highlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
var ctx = document.getElementById("canvas2").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
var ctx = document.getElementById("canvas3").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
var ctx = document.getElementById("canvas4").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
}
</script>
</body>第一个图表显示正确，但是当您按下第二个按钮时，它什么也没有显示。 提前谢谢你
最佳答案
在我看来，更好的解决方案是修改 DOM 以替换 canvas 元素，这样您就可以用新数据重新绘制它:
var canvas_html = '<canvas id="canvas" height="100px;"></canvas>';
var drawChart = function(data) {
// reinit canvas
$('#canvas_container').html(canvas_html);
// redraw chart
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(data, {
responsive : true
});
};
我做了一个update你的 fiddle ，这样你就可以看到结果。
关于javascript - Chart.js - 切换图表的可见性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32208522/