web-dev-qa-db-fra.com

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

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

//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 titre l'indique, je reçois Uncaught TypeError: Cannot read property 'getContext' of null et je ne suis pas tout à fait sûr du problème. Si je devais deviner, je dirais que c'est essayer de faire référence à quelque chose qui n'y était pas, mais je ne suis pas sûr à 100% si j'ai raison et comment y remédier. Tout conseil serait bon.

javascriptcharts
6
connor martin

La ligne qui lance l'erreur est

var winLossChart = document.getElementById('winLossChart').getContext('2d');

Il dit que document.getElementById('winLossChart') n'existe pas.

Cela serait dû au fait que votre script est interprété avant la fin de la création des éléments dans le DOM.

Vous pouvez soit lancer le script dans une fonction window.onload:

window.onload = function() {
   createChartWinLoss();
}

Vous pouvez également placer la balise de script elle-même en tant que dernier élément de l'élément body 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>

Dans les deux cas, le point d’entrée principal de votre code (createChartWinLoss) ne se produirait qu’après la création des autres éléments de la page, y compris le canevas.

En tant que processus général permettant de résoudre ce type de problèmes, lorsque vous avez vu l’exception dans votre console Javascript, vous auriez dû pouvoir ouvrir la trace de pile, ce qui vous aurait conduit à dire que l’erreur se produisait sur la ligne var winLossChart = .... aurait pu vous rendre plus susceptible d’avoir pu découvrir la source du problème.

12
Sam Fen

J'avais ce même problème. L'élément était renvoyé sous la forme dispHTMLUnkownElement.

La solution consistait à ajouter <!DOCTYPE html> en haut de ma réponse, puis IE a pris correctement le type d'élément.

1
Howard

Peut-être que cela peut aider quelqu'un d'autre ... Vous devez utiliser détruire() méthode.
Pour faire cela, vous devez 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

0
eladolo