Chart.js 没有显示在我的视图中

2024-05-09

我有一个使用 angular.js 运行的应用程序,我的视图之一应该加载图表。我正在使用 Chart.js,但由于某种原因它不起作用,并且我的控制台上没有显示错误。 这是我创建图表的函数:

$scope.writeBatteryChart = function(){
        console.log("Function was called");
        var data = {
            labels: ["10:30am", "11:00am", "11:30am", "12:00pm", "12:30pm", "01:00pm", "01:30pm"],
            datasets: [
                {
                    label: "Battery",
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: [65, 59, 80, 81, 56, 55, 40]
                }
            ]
        };

        var options = {
            responsive: true,
            bezierCurve : false
        }

        var ctx = document.getElementById("myChart").getContext("2d");
        var myLineChart = new Chart(ctx).Line(data, options);

    }

以下是应显示图表的 HTML:

               <div class="row">
                    <div class="col-md-8 col-sm-8 col-xs-8" style="padding-left: 0px;">
                        <div class="panel panel-info">
                          <div class="panel-heading">
                            <h3 class="panel-title">Battery <i class="fi-battery-half"></i></h3>
                          </div>
                          <div class="panel-body">
                            <canvas id="myChart" height="300"></canvas>
                          </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4" style="padding-left: 0px; padding-right: 0px;">

                    </div>
                </div>

我还加载了最新版本的 Chart.js:

    <!--Chart plugin -->
    <script src="bower_components/Chart.js/Chart.js" language="javascript"></script>

我注意到的一件事是画布正在以 0 尺寸渲染:

有人能看出我哪里做错了吗?


问题:我在画布加载到视图上之前调用该函数,所以我使用了setTimeout()打电话给writeBatteryChart()延迟以等待画布渲染。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Chart.js 没有显示在我的视图中 的相关文章

  • JS 在两个或多个点之间画线

    我需要在两个标签或标签之间画一条线 Example http caitriona github io connect the dots http caitriona github io connect the dots 我需要做这样的事情
  • 在 Node.js 中包含另一个文件中的 JavaScript 类定义

    我正在为 Node js 编写一个简单的服务器 并且使用我自己的类 名为User看起来像 function User socket this socket socket this nickname null just the typical
  • 如何在单页应用程序中使用 #-URL?

    本文 http danwebb net 2011 5 28 it is about the hashbangs提出了一个非常令人信服的论点 因为 URL 是长期存在的 它们被添加书签并传递 所以它们应该是有意义的 并且使用哈希进行真正的路由
  • Javascript 无法正确排序 DECIMAL 数字

    我有一些代码可以按字母顺序对名称进行排序 我遇到的问题是它处理小数的方式 它对名称进行排序 如下所示 我宁愿它按数字递增 DOG 1 0510 DOG 1 1031 DOG 11 1792 DOG 12 0920 DOG 12 1170 D
  • Javascript - 使数组索引 toLowerCase() 不起作用

    我试图将所有数组索引设置为小写字符串 但它不起作用 我在这里查看了其他答案并尝试了他们的解决方案 例如使用toString 添加之前toLowerCase但它不起作用 这很奇怪 我创建了一个问题的jsfiddlehere https jsf
  • TypeError:cli.init 不是 React Native 的函数

    在 MacBook Air M1 芯片中运行 npx react native init appName 时 TypeError cli init is not a function at run opt homebrew lib node
  • 如何检查侧边栏视图是否已经在主干中渲染?

    通常 用户通过主页进入网站 然后我在那里渲染侧边栏视图 接下来 用户单击链接 路由器呈现另一个视图并替换原始内容视图 侧边栏视图不会重新渲染 当用户在子页面上单击刷新时 侧边栏不会呈现 如何检查视图是否存在并且已渲染 划分责任并坚持下去 不
  • 如何获取 Spotify API 的访问令牌?

    我已经研究 Spotify api 和示例源代码几天了 但我仍然不知道如何获取访问令牌来访问用户的播放列表数据 我已经到达了拉起登录窗口 用户登录 然后收到授权码的地步 此时 我尝试做这样的事情 window open https acco
  • Jquery 子元素发生变化

    我正在尝试使用 jquery 在子元素 在本例中为 select 更改时触发事件 这是我的 HTML div class row addForm div class col lg 2 col md 2 col sm 3 col xs 6 d
  • Firefox 上的 jquery 焦点未设置

    我想将焦点设置到我的文本区域 以下是我的代码 this textInput val show focus 但它不起作用 实际上 当我按下鼠标按钮时 它会出现 但是当我松开鼠标时 它会从文本区域中删除 因此 经过大量搜索后 我发现 setTi
  • 是什么导致我的 SSRS 图表中出现范围参数错误?

    为什么我的图表中出现此错误 图表图像 https i stack imgur com HDpnU png 我在图表中使用这个表达式 Series Sum Fields Mins Att Value Sum Fields Mins Poss
  • 如何使用转义的 unicode 解码字符串?

    我不确定这叫什么 所以我在搜索时遇到了麻烦 如何使用 unicode 解码字符串http u00253A u00252F u00252Fexample com to http example com使用 JavaScript 我试过unes
  • Intern JS - 如何在链式 Command 方法中使用 Promise.all()?

    我是用 Intern JS 编写测试的新手 并且一直在遵循他们的文档来使用对象接口 https theintern github io intern interface object and 页面对象 https theintern git
  • Jquery Ajax 调用返回 403 状态

    我有一个 jquery Ajax 调用来实现会话的 keepalive 这个 keepAlive 方法将每 20 分钟调用一次 function keepAlive ajax type POST url KeepAliveDummy asp
  • 如何使 4.X Typescript 项目与旧版本的 Typescript(如 3.X)兼容?

    如何使基于 TS 4 X 构建的软件包与 3 X 兼容 例如 如果我有较新的版本 则使用新功能 否则使用any or unknown或旧版本支持的任何内容 有没有可能使用指令 https www typescriptlang org doc
  • 如何使用 API 中的数据填充选择的下拉元素 - ReactJS

    我对 React 还很陌生 我正在从 API 获取数据 当我检查控制台日志时可以看到数据 但是我不知道如何使用 map 创建一个新数组 然后选项元素可以使用该数组来显示货币代码 目前它填充下拉列表 但选项元素全部为空 结果显示为 NaN 下
  • React Router Tabs——保持组件安装

    我使用 React Router 创建了选项卡 每个选项卡都有不同的路线 但是 我想通过保持隐藏选项卡的安装来维护选项卡转换之间的选项卡状态 我该如何实现这一目标 每次路由切换时 React 路由器都会重新安装每个组件 已经有人问过这个问题
  • javascript 闭包和对象引用

    我的情况有点晦涩难懂 主要是因为我认为我已经掌握了闭包 所以基本上我想要的是将集合重置为默认值 假设我有一个集合 它具有带有对象参数数组的构造函数 var c new collection x y z 然后集合定期更新 因为我没有保留数组的
  • 尽管 getBoundingClientRect() 是假的,但如何将事件坐标转换为 SVG 坐标?

    我正在尝试根据鼠标的位置在 SVG 元素上动态绘制内容 不幸的是 我很难将 mousemove 事件中的鼠标坐标转换为 SVG 元素的坐标空间 这是我一直在测试的一个有缺陷的函数 CylinderDemo prototype handleM
  • 加载谷歌地图控件时是否有事件?

    我知道tilesloaded 但控件似乎在该事件之后加载 我基本上希望能够通过 jQuery 获取控件 但甚至找不到正确的监听 我也刚刚处理了 没有类似的事件 在控件可见之前空闲和tilesloaded触发 因此 基本上将 特殊控制 类添加

随机推荐

  • JavaScript 中的 Promise.all:如何获取所有 Promise 的解析值?

    我编写了以下node js文件 var csv require csv parser var fs require fs var Promise require bluebird var filename devices csv var d
  • Ruby 反向柯里化:这可能吗?

    关于 Ruby 1 9 x 中的柯里化 我一直在某些地方使用它 并且可以像基本上支持 proc 参数的默认参数一样进行翻译 p proc x y z x y z p curry 1 gt returns a lambda p curry 1
  • 在InputMethodService 外部调用InputMethodManager.setInputMethod(IBinder token, String id)。哪里可以找到代币?

    我想通过单击按钮在我的 EditText 上显示 Google 语音输入 IME 所以 根据this http android developers blogspot ru 2011 12 add voice typing to your
  • 从 future 中检索值时的 SIGABRT

    我在使用 C 11 future 时遇到问题 当我打电话时wait or get 关于返回的未来std async 程序接收从mutex标头 可能是什么问题呢 如何修复它 我在 Linux 上使用 g 4 6 将以下代码粘贴到 ideone
  • Selenium:等到 WebElement 中的文本发生变化

    我在用着selenium使用Python 2 7 从网页上的搜索框检索内容 搜索框动态检索结果并在框本身中显示结果 from selenium import webdriver from selenium webdriver common
  • 如何使用 jquery 从 iframe 内部滚动?

    我正在使用一个 Shadowbox 它生成一个 iframe 以在页面上显示产品详细信息 由于详细信息页面可能相当长 因此客户端需要一个 更多 按钮来向下滚动页面 显然 iframe 右侧的滚动条还不够 这是我为了让 iframe 滚动而尝
  • 如何使用text()函数插入html文本? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我需要更改包含 html 的元素的内容 我尝试过这个 但是 html 标签被打印了 content sections label text
  • Inno Setup 如何在浏览对话框中显示网络?

    在我的设置中 在浏览器中显示 浏览 按钮 wpSelectDir or CreateInputDirPage例如 网络永远不会显示 我对此进行了一段时间的搜索 但目前还没有找到任何解决方案 有没有办法显示网络并让用户选择网络路径 感谢您对此
  • 用于更改向量中元素顺序的闪亮小部件

    在很多网站上 您都有一个拖放界面来更改列表中元素的顺序 我正在寻找类似的东西闪亮 我希望用户能够拖放列表中的元素 通过更改顺序来更改优先级 现在我有一个滥用的解决方案selectizeInput 这是可行的 但当选择列表变得更大时 它很快就
  • Angularjs 在生产中禁用调试数据

    我正在尝试按照角度文档中的建议禁用生产服务器中的调试数据here https docs angularjs org guide production 补充一点 我并没有真正看到性能和加载时间有任何改进 这是我的代码在 app js 中的样子
  • 处理中渲染极地带面体时出现问题

    我最近一直在研究 Zohedrons 和Rob Bell http zomadic com 做出了美丽的 我玩了免费的极地带面体 Sketchup 插件 http zomebuilder com 并考虑使用几何图形加工 http proce
  • Spring Cloud Kubernetes + Spring Cloud Gateway:无法找到 k8s 服务的实例

    我正在使用 Spring Cloud Kubernetes Spring Cloud Gateway SCG 但在 GKE 上部署应用程序时遇到一些问题 SCG 找不到 k8s 服务 我仍然收到此错误 There was an unexpe
  • 如何在编译C代码时禁用警告?

    我正在使用 32 位 Fedora 14 系统 我正在使用编译我的源代码gcc 有谁知道如何在编译c代码时禁用警告 EDIT 是的 我知道 最好的办法是修复这些警告以避免任何未定义 未知的行为 但目前在这里 我第一次编写了巨大的代码 并且在
  • 当 DetailView 遇到时更新模型字段。 [姜戈]

    我有一个类似的 DetailViewviews py views py class CustomView DetailView context object name content model models AppModel templa
  • unsigned char* 缓冲区到 System::Drawing::Bitmap

    我正在尝试创建一个工具 资产转换器 使用以下命令将字体光栅化为 XNA 游戏的纹理页面自由类型2 http www freetype org freetype2 index html engine 下面 第一张图片是FreeType2的直接
  • RSpec 抛出分段错误

    有时我的测试套件会无缘无故地抛出分段错误 这是输出 Users Test rvm gems ruby 1 9 3 p392 gems activerecord 3 2 9 lib active record relation query m
  • 导出类时编译器错误

    我正在使用 Visual Studio 2013 但遇到了一个奇怪的问题 当我导出一个类时 它会抛出 尝试引用已删除的函数 错误 但是 当该类未导出时 它的行为会正确 让我举个例子 class Foo note the export cla
  • Qt 计算和比较密码哈希

    目前正在 Qt 中为测验程序构建面向 Web 的身份验证服务 据我了解 在数据库中存储用户密码时 必须对其进行隐藏 以防落入坏人之手 流行的方法似乎是添加的过程Salt https en wikipedia org wiki Salt cr
  • 为什么 Haskell 中有协函子和逆变函子的区别,而范畴论却没有区别?

    这个答案是从范畴论的角度来看的 https math stackexchange com a 661989 72174包括以下语句 事实是 协函子和逆变函子之间没有真正的区别 因为每个函子只是一个协变函子 More in details a
  • Chart.js 没有显示在我的视图中

    我有一个使用 angular js 运行的应用程序 我的视图之一应该加载图表 我正在使用 Chart js 但由于某种原因它不起作用 并且我的控制台上没有显示错误 这是我创建图表的函数 scope writeBatteryChart fun