Fatal编程技术网
  • javascript/
  • Javascript Chart.js-无法读取属性'；getContext'；空的

Javascript Chart.js-无法读取属性'；getContext'；空的

javascript charts

Javascript Chart.js-无法读取属性'；getContext'；空的,javascript,charts,Javascript,Charts,我的main.js文件中有以下Javascript： //array object of API stuff function createChartWinLoss(wins, losses) { var pieData = [ { value: losses, color: "#F7464A", highlight: "#FF5A5E", label: "Losses" }, { value: wins

我的
main.js
文件中有以下Javascript：

//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";
      }
    }
  });
}

//API stuff的数组对象
函数createChartWinLoss（赢、输）{
变量数据=[
{
价值：损失，
颜色：#F7464A“，
亮点：“FF5A5E”，
标签：“损失”
},
{
价值观：胜利，
颜色：“46BFBD”，
亮点：“5AD3D1”，
标签：“胜利”
}
];
变量选项={
错误：错误，
动画比例：对
}
var winLossChart=document.getElementById（'winLossChart'）.getContext（'2d'）；
新图表（winLossChart）.Pie（pieData，pieOptions）；
}
//使用测试数据创建图表
createChartWinLoss（）；
函数调用器lookup（）{
var召唤者_ID=“”；
var API_KEY=“keyhere”；
var sumID=$（“#theKey”）.val（）；
var div=document.getElementById（'stuff'）；
var组合=”；
变量数组=[sumID]；
var获胜；
风险价值损失；
div.innerHTML=div.innerHTML+“
数组计数：“+array.length+”
”；
对于（var i=0；i”+count+“：“+user+”+combine；
var wins=json[user][0]。条目[0]。wins；
var loss=json[user][0]。条目[0]。损失；
//用api中的赢家和输家填充图表
createChartWinLoss（赢，输）；
}
}
},
错误：函数（XMLHttpRequest、textStatus、errorshown）{
var user=Topuser；
console.log（错误抛出）；
如果（错误抛出==“未找到”）{
div.innerHTML=div.innerHTML+“
“+count+”：“+user+”+“+”未分级”；
}
}
});
}
HTML格式如下：

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


胜负
正如标题所示，我得到了
未捕获的TypeError:cannotread属性'getContext'为null
，我不完全确定问题出在哪里。如果我不得不猜测，我会说它试图引用一些不存在的东西，但我不能100%确定我是否正确以及如何修复它。任何建议都很好。

抛出错误的那一行是

var winLossChart = document.getElementById('winLossChart').getContext('2d');
这意味着
document.getElementById（'winlosshart'）
不存在

这可能是因为在DOM中创建完元素之前，脚本就已经被解释了

您可以在
窗口中启动脚本。onload
函数：

window.onload = function() {
   createChartWinLoss();
}
或者，您可以将脚本标记本身作为html文件的body元素中的最后一个元素

<body>
  <div class="container">
    <h2>Wins/Losses</h2>
    <canvas id="winLossChart" width="400" height="200"></canvas>
  </div>
  <script src="myscript.js"></script>
</body>


胜负
任何一种解决方案都意味着代码的主入口点（
createChartWinLoss
）只有在创建页面上的其他元素（包括画布）之后才会出现

作为解决这类问题的一般过程，当您在Javascript控制台中看到异常时，您应该能够打开堆栈跟踪，这将导致您发现错误源于行
var winlosshart=…
，这将使您更有可能发现问题的根源。

我也遇到了同样的问题。元素正在作为dispHTMLUnkownElement返回

解决方案是在我的回复顶部添加
，然后IE正确地选择元素类型。

也许这可以帮助其他人。。。 您必须使用destroy（）方法。
要做到这一点，您必须更改代码中的一些内容：

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

这个脚本中还有很多与Chart.js无关的内容，因此我们很难知道问题的来源。你能把你的问题简化成一个小的、独立的例子吗？此外，您应该使用控制台查找有关错误的更多详细信息。它是从哪一行来的？你能用调试器解决这个问题吗？（在Chrome中使用暂停异常）别担心，我想我知道问题出在哪里了。补充了一个答案。