Question

我使用Chart.js获得以下图表。

正如您所看到的，结果非常混乱。

我该如何清理它？

我已在stepSize轴上尝试了x，但它没有做任何事情。

＆＃13;

var ctx = $("#chart");
			
			var myLineChart = new Chart(ctx, {
				type: 'line',
				
			    data: {
					datasets:
					[
						{
							backgroundColor: '#27ae60',
							borderColor: '#27ae60',
							data: [
								{x:'2018-04-06 09:09:09.655699',y:167.96},{x:'2018-04-06 09:11:54.471139',y:177.35},{x:'2018-04-06 10:05:54.898945',y:173.22},{x:'2018-04-06 10:08:55.355812',y:177.30},{x:'2018-04-06 10:12:11.805191',y:180.15},{x:'2018-04-06 10:13:19.715115',y:179.14},{x:'2018-04-06 10:15:05.644111',y:176.00},{x:'2018-04-06 10:46:13.565495',y:156.05},{x:'2018-04-06 11:02:45.523708',y:180.08},{x:'2018-04-06 11:03:33.727033',y:180.56},{x:'2018-04-06 11:04:35.171490',y:179.14},{x:'2018-04-06 11:45:58.156544',y:181.19},{x:'2018-04-06 11:50:39.120997',y:180.23},{x:'2018-04-06 11:51:55.661541',y:180.57},{x:'2018-04-06 11:54:04.882602',y:181.16},{x:'2018-04-06 11:55:00.040104',y:180.06},{x:'2018-04-06 11:56:33.241252',y:180.55},{x:'2018-04-06 11:59:20.307318',y:179.14},{x:'2018-04-06 12:01:40.442655',y:180.57},{x:'2018-04-06 12:05:46.062293',y:180.93},{x:'2018-04-06 12:30:20.836871',y:179.17},{x:'2018-04-06 13:00:21.519024',y:180.04},{x:'2018-04-06 13:30:19.546782',y:180.25},{x:'2018-04-06 14:00:22.271000',y:180.59},{x:'2018-04-06 14:30:21.328425',y:180.60},{x:'2018-04-06 15:00:26.159340',y:180.17},{x:'2018-04-06 15:30:24.866116',y:181.00},{x:'2018-04-06 16:00:24.717159',y:181.03},{x:'2018-04-06 16:30:19.425427',y:181.17},{x:'2018-04-06 17:00:23.965748',y:181.17},{x:'2018-04-06 17:30:21.966713',y:180.22},{x:'2018-04-06 18:00:24.467742',y:180.55},{x:'2018-04-06 18:30:19.554409',y:180.09}							],
							fill: false,
						},
						{
							backgroundColor: '#2980b9',
							borderColor: '#2980b9',
							data: [
								{x:'2018-04-06 09:09:09.655699',y:182.11},{x:'2018-04-06 09:11:54.471139',y:180.95},{x:'2018-04-06 10:05:54.898945',y:183.27},{x:'2018-04-06 10:08:55.355812',y:182.44},{x:'2018-04-06 10:12:11.805191',y:183.12},{x:'2018-04-06 10:13:19.715115',y:183.14},{x:'2018-04-06 10:15:05.644111',y:182.87},{x:'2018-04-06 10:46:13.565495',y:181.60},{x:'2018-04-06 11:02:45.523708',y:183.19},{x:'2018-04-06 11:03:33.727033',y:182.84},{x:'2018-04-06 11:04:35.171490',y:182.77},{x:'2018-04-06 11:45:58.156544',y:182.47},{x:'2018-04-06 11:50:39.120997',y:182.23},{x:'2018-04-06 11:51:55.661541',y:181.48},{x:'2018-04-06 11:54:04.882602',y:183.43},{x:'2018-04-06 11:55:00.040104',y:183.20},{x:'2018-04-06 11:56:33.241252',y:182.88},{x:'2018-04-06 11:59:20.307318',y:181.19},{x:'2018-04-06 12:01:40.442655',y:182.04},{x:'2018-04-06 12:05:46.062293',y:182.18},{x:'2018-04-06 12:30:20.836871',y:182.82},{x:'2018-04-06 13:00:21.519024',y:182.27},{x:'2018-04-06 13:30:19.546782',y:183.40},{x:'2018-04-06 14:00:22.271000',y:181.61},{x:'2018-04-06 14:30:21.328425',y:182.89},{x:'2018-04-06 15:00:26.159340',y:182.87},{x:'2018-04-06 15:30:24.866116',y:182.99},{x:'2018-04-06 16:00:24.717159',y:182.86},{x:'2018-04-06 16:30:19.425427',y:182.88},{x:'2018-04-06 17:00:23.965748',y:181.96},{x:'2018-04-06 17:30:21.966713',y:181.87},{x:'2018-04-06 18:00:24.467742',y:182.90},{x:'2018-04-06 18:30:19.554409',y:183.07}							],
							fill: false,
						}  
					]	
				},
				
				options: {
				    responsive: false,
				    maintainAspectRatio: false,
				    scales: {
				        yAxes: [{
				            ticks: {
				                beginAtZero:false
				            }
				        }],
				        xAxes: [{
			                type: 'time',
							time: {
								parser: 'YYYY-MM-DD HH:mm:ss',
								unit: 'minute',
								displayFormats: {
		                        	'minute': 'HH:mm',
									'hour': 'HH:mm'
		                        }
							},
							ticks: {
								source: 'data'
							}
			            }]
				    }
				}
			   			
			});

＆＃13;

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/locale/af.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
</head>
<body>
<canvas id="chart" width="800" height="450"></canvas>
</body>
</html

＆＃13;

清理凌乱的Chart.js折线图结果

0 个答案: