个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 12:16:52 25 4
gpt4 key购买 nike

我正在做的这件事真的需要帮助。基本上我有 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/

25 4 0
文章推荐： javascript - 停止 JavaScript 间隔
文章推荐： c# - 以编程方式将 dependentAssembly 添加到 runtime\assemblyBinding
文章推荐： c# - 如何将 SQL "WHERE expr IN (query)"翻译成 LINQ？
文章推荐： javascript - Safari 显示的字体与其他浏览器不同 - 为特定浏览器设置特定字体系列 - 如何更改 Safari 的字体平滑
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com