jQuery Girl
  1. jQuery Girl
  3. Uncaught TypeError: impossible de lire la propriété ‘offsetWidth’ de undefined – chart.js
Intereting Posts
Comment obtenir l’expression d’un sélecteur jQuery sous forme de texte? Ajax / Jquery Autocomplete avec des données JSON Gérer dblclick dans le plugin Fullcalendar jQuery test des instructions jQuery dans la console JavaScript de Chrome Cliquez sur Développer la largeur de la zone de texte Mootools étend la classe «Function» avec une méthode «extend» rendant jQuery inutilisable Le plugin JQuery pour le chargement / évaluation paresseux? Est-ce que Ajax s’appelle cette méthode? Comment appeler par programme jQuery UI Draggable Drag start? Comment se concentrer première entrée? Validation jQuery – form.valid () renvoie toujours true jquery traversant pour trouver le parent d’un parent jQuery.validate.js onkeyup = vrai erreur Select2 v4 comment paginer les résultats avec AJAX Est-il possible de personnaliser un champ de saisie pour les montants avec les boutons + -?

Uncaught TypeError: impossible de lire la propriété ‘offsetWidth’ de undefined – chart.js

J’ai ce simple HTML:

et ce js: 

 var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } });

Même si le canevas est configuré avec l’ID myChart , j’obtiens le myChart erreur suivant: 

 Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

JSFiddle: https://jsfiddle.net/kroejrhx/

    Après avoir revisité la question, voici votre problème: vous utilisez la mauvaise version de chart.js . Selon cette section , si vous souhaitez utiliser un axe basé sur le temps, vous devez inclure explicitement moment.js ou utiliser la version de bundle.

    Si vous modifiez la ressource de votre jsfiddle en https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js affichera le graphique attendu. Pas besoin de changer le code du tout.

    Si vous voulez utiliser Chart.js v2.0, alors ce CDN fonctionnera.

    https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js

    Vous devez utiliser la version 2 de chart.js . Si vous utilisez npm , dans votre package.json , mettez à jour chart.js, par exemple, "chart.js": "^2.1.1", Si vous utilisez react-chartjs-2 , vous devez toujours vous assurer que votre version de chart.js est supérieure ou égale à 2.