chart.js之 - 无法读取空

的特性 '的getContext' 我有以下的Javascript在我main.js文件：chart.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"; 
     } 
    } 
    }); 
}

和HTML如下：

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

正如标题，我得到Uncaught TypeError: Cannot read property 'getContext' of null，我不完全确定问题是什么。如果我不得不猜测我会说它试图引用那些不存在的东西，但是我不能100％确定我是否正确以及如何解决问题。任何建议都会很棒。

来源

2015-03-19 connor martin

你有其他的东西在这个脚本无关chart.js之一大堆，所以很难为我们知道问题来自哪里。你可以将你的问题减少到一个更小的，独立的例子吗？另外，您应该使用控制台来查找有关该错误的更多详细信息。它是从哪里来的？你能用调试器来解决问题吗？（在Chrome中使用例外暂停。） – 2015-03-19 16:43:51

没关系，我想我明白了问题所在。添加了一个答案。 – 2015-03-19 16:48:00

所引发错误的行

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

这是说，document.getElementById('winLossChart')不存在。

这可能是因为在元素在DOM中创建完成之前正在解释您的脚本。

您既可以在window.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 winLossChart = ...，这会让你更有可能发现问题的根源。

来源

2015-03-19 16:47:41

感谢Sam Fen，您的解决方案也适用于我。 – 2017-08-09 14:01:14

我有这个相同的问题。该元素正在以dispHTMLUnkownElement的形式返回。

解决方案是将<!DOCTYPE html>添加到我的响应的顶部，然后IE正确拾取元素类型。

来源

2015-07-30 17:05:06 Howard

也许这可以帮助别人... 你必须使用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...

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

来源

2016-11-22 01:18:48 eladolo

chart.js之 - 无法读取空

回答

相关问题