Question

高，我尝试使用Chart.js库渲染图表时遇到了一个奇怪的问题。

x轴上的标签堆积在原点，而不是散布在整个轴上。

我的设置在以前的版本中运行良好，但是将其更改为2.7，因此可以在轴标签上添加边距/填充。现在，x轴标签不再起作用。

任何人都知道导致此问题的原因是什么

var chartLabels = [];
			var chartData = [];
			
			var green = 'rgba(15, 157, 88, 1)';
			var red = 'rgba(230, 74, 25, 1)';
			
			fetch(encodeURI("https://api.iextrading.com/1.0/stock/market/batch?symbols=aapl,fb&types=quote,chart&range=1d&displayPercent=true")).then(response => {
				return response.json();
			}).then(data => {
				var len = data.length;
				
				if(len == 0) {
					if(callBackFailure != null) {
						callBackFailure();
					}
					
				} else {
					console.log(data.AAPL.chart);
					var tempData = data.AAPL.chart;
					var len = tempData.length;
					var i;
					
					var format = 'hh:mm A'
					
					var lastTime = moment("09:30 AM", format);
					
					for(i = 0; i < len; i++) {
						lastTime = moment(tempData[i].label, format);
						chartLabels.push(moment(tempData[i].label, format));
						chartData.push({
							t: moment(tempData[i].label, format), 
							y: tempData[i].close
						});
					}
					

					// var time = moment() gives you current time. no format required.
					var closingTime = moment('04:01 PM', format);
					
					while(lastTime.isBefore(closingTime)) {
						lastTime.clone();
						lastTime.add(1,'m');
						chartLabels.push(lastTime.format(format));
						chartData.push(null);
					}
					
					console.log(i);
					console.log(lastTime);
					
					console.log(chartLabels);
					console.log(chartData);

					var ctx = document.getElementById("myChart").getContext('2d');

					var myChart = new Chart(ctx, {
						type: 'line',
						data: {
							labels: chartLabels,
							datasets: [{
								label: 'Closing price',
								data: chartData,
								borderWidth: 3, 
								borderColor: 'rgba(230, 74, 25, 1)', 
								backgroundColor: 'rgba(230, 74, 25, 0.3)'
							}]
						},
						options: {
							responsive: true,
							legend: {
								display: false
							},
							tooltips: {
								enabled: false
							},
							scales: {
								xAxes: [{
									type: 'time',
									distribution: 'series', 
									gridLines: {
									  display: true ,
									  color: "#666666", 
									},
									ticks: {
										source: 'auto',
										autoSkip: true,
										padding: 10
									},
								}],
								yAxes: [{
									gridLines: {
									  display: true ,
									  color: "#666666"
									},
									ticks: {
										padding: 10
									},
								}]
							},
							elements: { 
								point: { 
									radius: 0 
								} 
							},
							spanGaps: true
						}
					});
				}
			  
			}).catch(err => {
			  // Do something for an error here
				console.log(err);
			});

body {
				background-color: black;
			}
			canvas {
				-moz-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				
				width: 1000px !important;
				height: 600px !important;
			}

<!doctype html>
<html>
	<head>
		<title>Line Chart</title>
    <script src="https://momentjs.com/downloads/moment.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
	</head>

	<body>
		<canvas id="myChart" width="400px" height="400px"></canvas>
	</body>
</html>

Chart.js xAxis标签在原点堆叠

0 个答案: