草庐IT

javascript - Chart.js - 无法读取 null 的属性 'getContext'

coder 2024-07-22 原文

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

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% 确定我是否正确以及如何修复它。任何建议都会很棒。

最佳答案

抛出错误的行是

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

表示 document.getElementById('winLossChart') 不存在。

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

您可以在 window.onload 函数中启动脚本:

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

或者您可以将脚本标记本身作为 html 文件正文元素中的最后一个元素。

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

这两种解决方案都意味着代码的主要入口点 (createChartWinLoss) 只会在页面上的其他元素(包括 Canvas )创建之后发生。

作为解决此类问题的一般过程,当您在 Javascript 控制台中看到异常时,您应该能够打开堆栈跟踪,这会让您发现错误源自行var winLossChart = ...,这会让您更有可能发现问题的根源。

关于javascript - Chart.js - 无法读取 null 的属性 'getContext',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29135682/

有关javascript - Chart.js - 无法读取 null 的属性 'getContext'的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身,new.html.erb,有代码:当我运行rspec时,它失败了:1)messages/new.html.erbshou

  2. ruby-on-rails - 由于 "wkhtmltopdf",PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中,我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  3. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t

  4. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  5. ruby-on-rails - 如果为空或不验证数值,则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初,我将所有3列的:default=>0放在表格中,但我不想要这样,因为它已经填充了字段,我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  6. ruby-on-rails - 无法使用 Rails 3.2 创建插件? - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject),但我没有脚本/生成,只有脚本/rails,当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗?没有这个命令可以创建插件吗?PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布,插件生成器已经被移除。查看变更日志here.现在

  7. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他,以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时,出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  8. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗? 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话,Rails使用#method_missing作为属性setter,因此您的模块将优先,阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost),那么您的实例方法需要进入一个特殊的模块:classBlah

  9. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器,然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  10. ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案? - 2

    在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',

随机推荐