Chart.js - Impossible de lire la propriété 'getContext', null

J'ai le code Javascript suivant dans mon main.js fichier:

//array object of API stuff
function createChartWinLoss(wins, losses) {
var pieData = [
{
value: losses,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Losses"
},
{
value: wins,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Wins"
}
];
var pieOptions = {
segmentShowStroke : false,
animateScale : true
}
var winLossChart = document.getElementById('winLossChart').getContext('2d');
new Chart(winLossChart).Pie(pieData, pieOptions);
}
//creates the chart with test data
createChartWinLoss();
function summonerLookUp() {
var SUMMONER_ID = "";
var API_KEY = "keyhere";
var sumID = $("#theKey").val();
var div = document.getElementById('stuff');
var combine = "";
var array = [sumID];
var wins;
var losses;
div.innerHTML = div.innerHTML + "<br />array count: " + array.length + "<br />";
for (var i = 0; i < array.length; i++) {
combine = "";
SUMMONER_ID = array[i];
getStuff(SUMMONER_ID, combine, API_KEY, div, i);
}
}
function getStuff(SUMMONER_ID, combine, API_KEY, div, count) {
var Topuser = SUMMONER_ID;
$.ajax({
url: 'https://euw.api.pvp.net/api/lol/euw/v2.5/league/by-summoner/' + SUMMONER_ID + '/entry?api_key=' + API_KEY,
type: 'GET',
dataType: 'json',
async: false,
data: {},
success: function (json) {
var user = Topuser;
if (typeof json[user][0].queue != "undefined") {
if (json[user][0].queue == "RANKED_SOLO_5x5") {
combine = json[user][0].tier + " " + json[user][0].entries[0].division  + " - " + json[user][0].entries[0].wins + " Wins " + json[user][0].entries[0].losses + " losses";
div.innerHTML = div.innerHTML + "<br />" + count + ": " + user + " " + combine;
var wins = json[user][0].entries[0].wins;
var losses = json[user][0].entries[0].losses;
//populates chart with wins losses from api
createChartWinLoss(wins,losses);
}
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
var user = Topuser;
console.log(errorThrown);
if (errorThrown === "Not Found") {
div.innerHTML = div.innerHTML + "<br />" + count + ": " + user + " " + "UNRANKED";
}
}
});
}

Et le HTML est comme suit:

<div class="container">
<h2>Wins/Losses</h2>
<canvas id="winLossChart" width="400" height="200"></canvas>
</div>

Comme le suggère le titre, je suis Uncaught TypeError: Cannot read property 'getContext' of null et je ne suis pas entièrement sûr de ce qu'est la question. Si je devais deviner, je dirais qu'il essayait de référence à quelque chose qui n'était pas là, mais je ne suis pas sûr à 100% si je suis correct et comment le résoudre. Tout conseil serait formidable.

Vous avez tout un tas d'autres trucs dans ce script qui n'est pas lié à Chart.js, il est donc difficile pour nous de savoir d'où le problème vient. Pouvez-vous réduire le problème à un plus petit, autonome exemple? Aussi, vous devez utiliser la console pour trouver plus de détails sur l'erreur. Quelle ligne est-il en venir? Pouvez-vous entrer dans le problème de l'utilisation du débogueur? (Utilisation de Pause sur les Exceptions dans google Chrome.)
Tant pis, je crois que je vois ce qu'est la question. Ajout d'une réponse.

OriginalL'auteur connor martin | 2015-03-19

charts javascript

12

La ligne qui est en train de jeter l'erreur est
```
var winLossChart = document.getElementById('winLossChart').getContext('2d');
```
C'est dire que document.getElementById('winLossChart') n'existe pas.

Ce serait parce que votre script est interprété avant les éléments ont fini d'être créé dans le DOM.

Vous pouvez soit lancer le script dans un window.onload fonction:
```
window.onload = function() {
createChartWinLoss();
}
```
Ou vous pourriez mettre la balise script lui-même comme le dernier élément dans l'élément de corps de votre fichier html.
```
<body>
<div class="container">
<h2>Wins/Losses</h2>
<canvas id="winLossChart" width="400" height="200"></canvas>
</div>
<script src="myscript.js"></script>
</body>
```
Une ou l'autre solution serait de dire que le principal point d'entrée de votre code (createChartWinLoss) ne se produisent après l'autre les éléments sur la page, y compris la toile, ont été créés.

Comme un processus général en vue de résoudre ces types de problèmes, quand vous avez vu que l'exception dans votre console Javascript, vous devez avoir été en mesure d'ouvrir la trace de la pile, ce qui aurait conduit au fait que provient l'erreur sur la ligne var winLossChart = ..., ce qui aurait rendu plus susceptibles d'avoir été en mesure de découvrir la source du problème.

Merci Sam de Fagnes , de Votre solution fonctionne sur moi.

OriginalL'auteur Sam Fen
1

J'ai eu ce même problème. L'élément a été retournée comme dispHTMLUnkownElement.

La solution était d'ajouter <!DOCTYPE html>vers le haut de ma réponse et puis IE ramassé le type de l'élément correctement.

OriginalL'auteur Howard

Peut-être cela peut aider quelqu'un d'autre...
Vous devez utiliser destroy() méthode.

Pour fait que vous avez à changer quelques choses dans votre code:

var winLossChart = "";//Here you make your chart var global
function createChartWinLoss(wins, losses) {
var pieData = [{
value: losses,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Losses"
}, {
value: wins,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Wins"
}];
var pieOptions = {
segmentShowStroke: false,
animateScale: true
}
//Here´s the change inside the function where you run destroy().
if(typeof winLossChart.destroy != "undefined") winLossChart.destroy();
winLossChart = document.getElementById('winLossChart').getContext('2d');
new Chart(winLossChart).Pie(pieData, pieOptions);
}
//creates the chart with test data...

https://github.com/chartjs/Chart.js/issues/3231

OriginalL'auteur eladolo

Vous devez vous connecter pour publier un commentaire.