(javascript) aynı grafikten alt alta 2 tane yapma

16-04-2019, 15:08:46

merhabalar 2 tane aynı grafiği alt alta göstermek istiyorum ama ikincisini koyduğumda muhtemelen idler aynı olduğu için ilkini göstermiyor sadece ikincisini gösteriyor. hangi idleri değiştirirsem değiştireyim sorunu çözemedim yardımcı olabilir misiniz acaba ??

http://prntscr.com/ncogu6

ÖRNEK KODLARDA Bİ TANE VAR KOPYALAYIP ALT ALTA 2 TANE OLMASINI İSTİYORUM.

<!DOCTYPE html>
<!-- saved from url=(0063)[url]https://www.chartjs.org/samples/latest/charts/bar/vertical.html[/url] -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Bar Chart</title>
	<script async="" src="./chart_files/analytics.js.indir"></script><script src="./chart_files/Chart.min.js.indir"></script>
	<script src="./chart_files/utils.js.indir"></script>
	<style>
	canvas {
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	</style>
<style type="text/css">/* Chart.js */
@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}</style></head>

<body>

	<div id="container" style="width: 75%;"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
		<canvas id="canvas" style="display: block; height: 570px; width: 1140px;" width="1425" height="712" class="chartjs-render-monitor"></canvas>
	</div>

	<script>
		var MONTHS = ['','Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'];
		var color = Chart.helpers.color;
		var barChartData = {
			labels: ['','Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'],
			datasets: [{
				label: 'Birim Tüketim',
				backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
				borderColor: window.chartColors.red,
				borderWidth: 2,
				data: [0,10,20,30,400]
			},]

		};

		window.onload = function() {
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myBar = new Chart(ctx, {
				type: 'bar',
				data: barChartData,
				options: {
					responsive: true,
					legend: {
						position: 'top',
					},
					title: {
						display: true,
						text: ''
					}
				}
			});

		};


	</script>
	
</body>
</html>

lazım olursa diye tüm dosyalarda burda.
https://files.fm/u/q7ab7dw6

16-04-2019, 15:47:31

#2

yakutmedya

hocam include_once ve require_once ile bi bakarmisiniz

16-04-2019, 15:53:36

#3

birenksec

Birden fazla çağırmak için id yerine class kullanman gerekiyor. Aynı class içindekileri for ile döndürerek birden fazla grafik oluşturabilirsin.

window.onload = function() {
            var ctx = document.getElementsByClassName('canvas');
            for (var i = 0; i < ctx.length; i++) {
                ctx[i].getContext('2d');

                
                window.myBar = new Chart(ctx[i], {
                    type: 'bar',
                    data: barChartData,
                    options: {
                        responsive: true,
                        legend: {
                            position: 'top',
                        },
                        title: {
                            display: true,
                            text: ''
                        }
                    }
                });
            }
            

        };

16-04-2019, 15:55:53

#4

Slyt2006

Hocam aynı html kodlarını kopyalayıp yapıştırın. Sonradan yapıştırdığınız canvasin ID sini canvas2 diye degistirin.

window.onload ile başlayan fonksiyonu da aşağıdaki gibi değiştirirseniz çalışacaktır. 2. Grafiğin verileri farklı olacaksa canvas2 nin data kısmındaki barChartData yi 2 diye değiştirip diğer scriptti kopyalayıp değerleri değiştirip adını barChartData2 olarak değiştirebilirsiniz.

<script>

window.onload = function() {
var ctx2 = document.getElementById('canvas2').getContext('2d' );
window.myBar = new Chart(ctx2, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: ''
}
}
});

var ctx = document.getElementById('canvas').getContext('2d') ;
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: ''
}
}
});

};

</script>

16-04-2019, 19:37:51

#5

U_uR

birenksec adlı üyeden alıntı: mesajı görüntüle

Birden fazla çağırmak için id yerine class kullanman gerekiyor. Aynı class içindekileri for ile döndürerek birden fazla grafik oluşturabilirsin.

window.onload = function() {
            var ctx = document.getElementsByClassName('canvas');
            for (var i = 0; i < ctx.length; i++) {
                ctx[i].getContext('2d');

                
                window.myBar = new Chart(ctx[i], {
                    type: 'bar',
                    data: barChartData,
                    options: {
                        responsive: true,
                        legend: {
                            position: 'top',
                        },
                        title: {
                            display: true,
                            text: ''
                        }
                    }
                });
            }
            

        };

biraz zorlandım ama bi şekilde yaptım düzenleyerek

çok teşekkür ederim hocam r10 like verdim

16-04-2019, 19:56:28

#6

birenksec

U_uR adlı üyeden alıntı: mesajı görüntüle

biraz zorlandım ama bi şekilde yaptım düzenleyerek

çok teşekkür ederim hocam r10 like verdim

Yardımcı olabildiysem ne mutlu bana

Ewy kolay gelsin.