Question

我真的需要帮助我正在努力的这件事。基本上我有4个由chartjs渲染的图表。我制作了4个按钮，只显示或隐藏所需的DIV。我非常确定它可以在jQuery方面工作，但是我并不熟悉Chart.js方面发生的事情。

＆＃13;

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

＆＃13;

第一个图表显示正确，但是当您按下第二个按钮时，它什么也没有显示。提前谢谢

Answer 1

在我看来，更好的解决方案是修改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你的小提琴，所以你可以看到结果。

Answer 2

这很繁琐，认为这是因为你使用Chart.js使用iframe创建图表，这些图表从来都不是很有趣。没有强制页面重新加载我不认为你将能够做到这一点。画布在隐藏图表上以0px高度和宽度绘制，因此只需使用jQuery更改其父级div显示就可以阻止芥末。

I've updated your fiddle所以单击每个按钮会分别显示每个图表，但我唯一无法解决的是在页面加载时隐藏最后三个图表。希望这是你可以使用的东西。

我已从图表中删除display: none

Answer 3

我有同样的问题并通过查看容器div的可见性来解决它，如果div是可见的渲染图表，否则什么都不做。所以在切换选项卡上调用函数来渲染图表，那时div应该是可见的。这是示例代码，

if ($(".canvas-holder2").is(":visible")) {

    window['myDoughnut'] = new Chart($("#chart-area")[0]
            .getContext("2d"))
            .Doughnut(data, {

                responsive: true,
                animateScale: true
            });

                window['myDoughnut'].update();
}

Chart.js - 切换图表的可见性

3 个答案: