Pourquoi le fait de placer deux ensembles de données avec un axe cartésien temporel dans Chart.js provoque-t-il deux ensembles de graduations de l'axe Y ?

J. Todd

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 ?

Lee Lenalee

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 axispiè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.

modifier le
0

laisse moi dire quelques mots

0commentaires
connexionAprès avoir participé à la revue

Articles connexes

TOP liste

  1. 1

    Redirection HTTP vers HTTPS dans Java à l'aide de HTTPURLConnection

  2. 2

    Uncaught TypeError: map n'est pas une fonction dans Reactjs avec Firebase

  3. 3

    Laravel SQLSTATE [HY000] [1049] Base de données inconnue 'previous_db_name'

  4. 4

    Comment envoyer plusieurs variables de la lame au contrôleur

  5. 5

    Microsoft.WebApplication.targets

  6. 6

    Comment analyser un fichier avec un tableau d'objets JSON en utilisant Node.js?

  7. 7

    Comment définir du texte dans un QLabel et afficher les caractères '<>'?

  8. 8

    Concaténer des variables dans ansible

  9. 9

    Filtrer les données en fonction des conditions d'une trame de données

  10. 10

    Échec de l'exécution de 'insertBefore' sur 'Node': le paramètre 1 n'est pas de type 'Node'

  11. 11

    ESP8266 HADRWARE MINUTERIE, USA pour cocher une macro étrange

  12. 12

    Comment changer le navigateur par défaut en Microsoft Edge pour Jupyter Notebook sous Windows 10 ?

  13. 13

    Comment centrer un div tout en utilisant la transition et transformer avec l'échelle

  14. 14

    Stop jQuery execution after one time execution

  15. 15

    obtenir le nombre de marqueur affiché sur la carte

  16. 16

    System.Data.SqlClient.SqlException: 'Nom de colonne non valide' ApplicationRoleId '.'

  17. 17

    Générer une variable binaire avec une corrélation prédéfinie avec une variable déjà existante

  18. 18

    comment afficher un bouton au-dessus d'un autre élément ?

  19. 19

    Enregistrer le chemin de l'image de la galerie vers la base de données de la salle et l'afficher dans la liste des recycleurs

  20. 20

    php ajouter et fusionner des données de deux tables

  21. 21

    Comment utiliser le stockage local et le supprimer lorsqu'il n'est pas nécessaire

chaudétiquette

Archive