İlk temizlik tamamlandı bir önceki projeden

2026-04-28 21:14:25 +03:00
commit f80443aec0
10000 changed files with 959965 additions and 0 deletions
@@ -0,0 +1,128 @@
+<!doctype html>
+<html>
+
+<head>
+	<title>Custom Tooltips using Data Points</title>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+	<script src="../../dist/Chart.min.js"></script>
+	<script src="../utils.js"></script>
+	<style>
+		canvas{
+			-moz-user-select: none;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+		}
+		.chartjs-tooltip {
+			opacity: 1;
+			position: absolute;
+			background: rgba(0, 0, 0, .7);
+			color: white;
+			border-radius: 3px;
+			-webkit-transition: all .1s ease;
+			transition: all .1s ease;
+			pointer-events: none;
+			-webkit-transform: translate(-50%, 0);
+			transform: translate(-50%, 0);
+			padding: 4px;
+		}
+
+		.chartjs-tooltip-key {
+			display: inline-block;
+			width: 10px;
+			height: 10px;
+		}
+	</style>
+</head>
+
+<body>
+	<div id="canvas-holder1" style="width:75%;">
+		<canvas id="chart1"></canvas>
+		<div class="chartjs-tooltip" id="tooltip-0"></div>
+		<div class="chartjs-tooltip" id="tooltip-1"></div>
+	</div>
+	<script>
+		var customTooltips = function(tooltip) {
+			$(this._chart.canvas).css('cursor', 'pointer');
+
+			var positionY = this._chart.canvas.offsetTop;
+			var positionX = this._chart.canvas.offsetLeft;
+
+			$('.chartjs-tooltip').css({
+				opacity: 0,
+			});
+
+			if (!tooltip || !tooltip.opacity) {
+				return;
+			}
+
+			if (tooltip.dataPoints.length > 0) {
+				tooltip.dataPoints.forEach(function(dataPoint) {
+					var content = [dataPoint.xLabel, dataPoint.yLabel].join(': ');
+					var $tooltip = $('#tooltip-' + dataPoint.datasetIndex);
+
+					$tooltip.html(content);
+					$tooltip.css({
+						opacity: 1,
+						top: positionY + dataPoint.y + 'px',
+						left: positionX + dataPoint.x + 'px',
+					});
+				});
+			}
+		};
+		var color = Chart.helpers.color;
+		var lineChartData = {
+			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+			datasets: [{
+				label: 'My First dataset',
+				backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
+				borderColor: window.chartColors.red,
+				pointBackgroundColor: window.chartColors.red,
+				data: [
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor()
+				]
+			}, {
+				label: 'My Second dataset',
+				backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
+				borderColor: window.chartColors.blue,
+				pointBackgroundColor: window.chartColors.blue,
+				data: [
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor()
+				]
+			}]
+		};
+
+		window.onload = function() {
+			var chartEl = document.getElementById('chart1');
+			new Chart(chartEl, {
+				type: 'line',
+				data: lineChartData,
+				options: {
+					title: {
+						display: true,
+						text: 'Chart.js - Custom Tooltips using Data Points'
+					},
+					tooltips: {
+						enabled: false,
+						mode: 'index',
+						intersect: false,
+						custom: customTooltips
+					}
+				}
+			});
+		};
+	</script>
+</body>
+
+</html>