Ярлыки xAxis Chart.js, сложенные в исходной точке - PullRequest
Новая
       23

Ярлыки xAxis Chart.js, сложенные в исходной точке

0 голосов
/ 30 сентября 2018

High, у меня странная проблема с графиком, который я пытаюсь сделать с помощью библиотеки Chart.js.

enter image description here

Метки на 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>
...