ChartJS：用户单击任何数据点时，X轴上的标记

时间：2018-10-31 08:49:23

标签： javascript jquery html css chart.js

当用户单击任何数据点时，我想在X轴上显示一个标记，这是为了保留UI上先前选择的数据点的引用，使用该单击的数据点，我将使用AJAX并以表格格式显示。

Codepen链接：https://codepen.io/anon/pen/xyoLXP

这是我要存档的内容，能否请您告诉我如何添加该标记？ enter image description here 

var lineChartData = {
		labels: ["0", "5", "7.5", "10", "11", "12", "13", "15"],
		datasets: [{
				label: "SES 3.4",
				fillColor: "rgba(255,255,255,0)",
				strokeColor: "rgba(16,133,135,1)",
				pointColor: "rgba(16,133,135,1)",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(16,133,135,1)",
				data: ["128.940", "131.397", "132.235", "128.235", "125.636", "127.271", "125.667", "129.554"]
		}, {
				label: "SES 5.6",
				fillColor: "rgba(255,255,255,0)",
				strokeColor: "rgba(82,185,159,1)",
				pointColor: "rgba(82,185,159,1)",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(82,185,159,1)",
				data: ["128.948", "130.369", "131.038", "125.867", "121.893", "119.656", "119.026", "119.737"]
		}, {
				label: "SES 6.7",
				fillColor: "rgba(255,255,255,0)",
				strokeColor: "rgba(242,175,62,1)",
				pointColor: "rgba(242,175,62,1)",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(242,175,62,1)",
				data: ["127.473", "128.983", "129.327", "123.416", "118.829", "116.843", "117.190", "115.215"]
		}, {
				label: "SES 8.9",
				fillColor: "rgba(255,255,255,0)",
				strokeColor: "rgba(236,83,62,1)",
				pointColor: "rgba(236,83,62,1)",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(236,83,62,1)",
				data: ["127.283", "125.147", "124.489", "116.783", "111.696", "110.563", "105.469", "104.332"]
		}]

}

window.onload = function() {
		var ctx = document.getElementById("canvas").getContext("2d");
		window.myLine = new Chart(ctx).Line(lineChartData, {
				responsive: true
		});
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<body>

		<div style="width:80%">
			<div>
				<canvas id="canvas" height="350" width="600"></canvas>
			</div>
		</div>
</body></html>

0 个答案:

没有答案
相关问题
最新问题