var canvas = document.getElementById('chart');
function genMockData() {
return {
x: moment().add(moment.duration(Math.random() * 10, 'hours')).format('YYYY-MM-DD HH:mm:ss'),
y: Math.random() * 100
}
}
new Chart(canvas, {
type: 'line',
data: {
labels: [],
datasets: [{
data: [genMockData(), genMockData(), genMockData()]
}, {
data: [genMockData(), genMockData(), genMockData()]
}]
},
options: {
scales: {
axis: {
x: {
type: 'time'
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="chart"></canvas>
Bien qu'il semble que les deux ensembles de données soient mis à l'échelle sur la base du même axe Y, l'ajout de « temps » en tant que paramètres de type pour l'axe x entraîne deux ensembles de graduations (l'un étant 0-1, en intervalles décimaux) sur l'axe Y. Comment puis-je me débarrasser des graduations 0-1 sur l'axe Y ?
Parce que dans votre configuration, vous spécifiez un nouvel axe et puisque vous ne spécifiez pas de placement, cela en fait un axe, la suppression de la axis
pièce résoudra votre problème
var canvas = document.getElementById('chart');
function genMockData() {
return {
x: moment().add(moment.duration(Math.random() * 10, 'hours')).format('YYYY-MM-DD HH:mm:ss'),
y: Math.random() * 100
}
}
new Chart(canvas, {
type: 'line',
data: {
labels: [],
datasets: [{
data: [genMockData(), genMockData(), genMockData()]
}, {
data: [genMockData(), genMockData(), genMockData()]
}]
},
options: {
scales: {
x: {
type: 'time'
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="chart"></canvas>
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots