first commit

2023-04-26 13:17:21 +02:00
commit 535741001e
1612 changed files with 820287 additions and 0 deletions
--- a/chart/samples/tooltips/dataPoints-customTooltips.html
+++ b/chart/samples/tooltips/dataPoints-customTooltips.html
@ -0,0 +1,125 @@
+<!doctype html>
+<html>
+
+<head>
+	<title>Custom Tooltips using Data Points</title>
+	<script src="../../Chart.bundle.js"></script>
+	<script src="../utils.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.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>
+	<div class="chartjs-tooltip" id="tooltip-0"></div>
+	<div class="chartjs-tooltip" id="tooltip-1"></div>
+	<script>
+		var customTooltips = function (tooltip) {
+			$(this._chart.canvas).css("cursor", "pointer");
+
+			$(".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: dataPoint.y + "px",
+						left: 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");
+			var chart = 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>