Chartjs - 如何在 x 轴标签上获取过去 7 天的数据?

2023-12-12

我试图在折线图的 x 轴上获取过去 7 天的信息(使用 Chartjs)。做这个的最好方式是什么?

Thanks


您可以使用以下代码实例化过去 7 天的图表:

let start = new Date(),
  end = new Date();

start.setDate(start.getDate() - 7); // set to 'now' minus 7 days.
start.setHours(0, 0, 0, 0); // set to midnight.

new Chart(document.getElementById("chart"), {
  type: "line",
  options: {
    scales: {
      xAxes: [{
        type: "time",
        time: {
          min: start,
          max: end,
          unit: "day"
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>

日期算术之所以有效,是因为日期对象自动更正自身当该值对于设置的月份无效时。

您需要提供您的价值观x (or t) & y特性,如文档中指定的.

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

Chartjs - 如何在 x 轴标签上获取过去 7 天的数据? 的相关文章

  • 获取语​​音通道的用户数

    我正在重写我的音乐部分朋友不和谐机器人 https top gg bot 629799045954797609 我试图弄清楚如何获取执行命令的人的语音通道中的用户数量 我到处都找过 但似乎找不到它或它的用法 现在我正在使用以下内容 modu
  • 为什么我无法使用 HTML5 音频标签多次播放声音?

    这就是声音的 存储 方式
  • 在生产中使用 css / javascript 源映射对性能有何影响?

    生产环境中应该使用源映射吗 除了调试之外 它们还有什么好处吗 由于额外的服务器往返 它们是否会影响应用程序加载时间 浏览器是否足够智能来加载 map应用程序加载和渲染后的资产 如果浏览器找不到 map asset 404错误 会对性能产生影
  • JavaScript 中的 ParseFloat 函数

    当我添加两个文本框值时1 001 and 0 001然后我做了一个parseFloat I get 1 0019999999 我要它1 002 你能帮助我吗 JavaScriptNumber http www w3schools com j
  • 如何在D3节点中放置图像?

    到目前为止 我已经创建了这些 D3 节点 用于创建可折叠的层次树 到目前为止 这些节点的颜色为 AA1C1C 深红色 以表明如果您单击它们 它们将扩展到更多节点 我想要做的是在节点中使用图像中的位置 这对于所有用户来说都是一个加号 以知道它
  • 匹配CSS的正则表达式“<属性>:<值>”

    我从以下位置检索了 CSS 规则document styleSheets现在我正在寻找提取它的属性和值 cssText expl position absolute background color rgb 204 204 204 max
  • YouTube - 右键单击​​时不显示上下文菜单

    想法 通过使用右键拖放到视频播放器上来查找 YouTube 视频 例如 每 2 屏幕宽度 1 秒 因此 在 1920x1080 的屏幕上 如果我按下鼠标右键 将其向左拖动 384 像素 20 然后松开 视频应该快退 10 秒 我有一个 Gr
  • 单击元素外部时触发事件的指令

    我知道有很多问题都在问类似的事情 但没有人真正解决我的问题 我正在尝试构建一个指令 当鼠标单击当前元素外部时 该指令将执行表达式 为什么我需要这个功能 我正在构建一个应用程序 在这个应用程序中 有 3 个下拉菜单 5 个下拉列表 如选择的
  • 如何在 vuejs 中防止/停止点击传播

    我有一个递归列表 树 每个元素都有一个 click sayHello el id 现在的问题是 因为它是一个嵌套列表 例如 list element 0 01 list el 1 01 list el 2 01 list el 1 02 l
  • 如何让更大的布局适合小设备屏幕?

    我有一个小问题meta viewport元素 问题是我的布局min width比我想要使用的许多屏幕分辨率都要大 所以将其设置为 没有帮助 结果我得到的页面必须缩小以适应设备宽度 如果我什至添加像 它也不起作用 发现了一个黑客来自CSS 技
  • jQuery 单击位于另一个 div 之上的 div

    我的 jQuery 有问题click当选择器是 a 时div那是在另一个之上div正如这里所看到的 the html div div div div css parent background color red width 100px h
  • 在 Jscript 中实例化 System.Threading.Thread 对象

    我正在尝试使用 Jscript 创建一个新的 System Threading Thread 对象 但我无法让构造函数工作 如果我只是执行以下操作 var thread new Thread threadFunc function thre
  • PHP:在执行 php 脚本时显示“正在加载”页面

    这就是我现在所拥有的 我有一个网页 当访问该网页时 它会通过开放 API 连接到 Surveygizmo com 检索大量数据 然后将这些数据返回给我进行处理 此过程大约需要 10 12 秒 在执行时 页面只是处于 正在加载 状态 并且我会
  • 需要将焦点放在react中的div上

    我有一个之前用 H1 标签包裹的文本 页面加载后 我需要专注于该文本 为了方便起见 我将它包装在 div 中 render const translate billing primaryContactSelection true this
  • IE8 上 json 解析失败

    json gt 返回的响应 msg div p Unfortunately we were unable to process your application p br Please upload a CV br div status e
  • jQuery document read() 函数可能需要很长时间才能执行

    我的问题是 有时一段 JavaScript 通常是 Google Analytics 可能需要很长时间才能加载 尽管 HTML 准备好 遍历和操作 并不重要 如果我使用以下代码 document ready function p text
  • 如何使 Meteor 上的服务器可以访问文本文件

    我很惊讶我无法在这里搜索我的答案 似乎没有其他人遇到这个问题 当您运行meteor服务时 js html等被打包在 meteor local build文件夹中 但它似乎排除了不是js或html的内容 我有一个名为 magicsets 的文
  • Chrome 和 IE 上的滚动/延迟事件

    我试图让用户始终看到一个内容块 即使他向下滚动页面也是如此 他还应该能够上下滚动内容块 这是一个精简版本的小提琴 向您展示我的意思 http jsfiddle net 9ehfV 2 http jsfiddle net 9ehfV 2 人们
  • 显示对象内容 - JS/jQuery

    With this data events 返回 object Object 我需要看看里面到底发生了什么 我找到了这个 var Finder each this data events function i n Finder Name i
  • 获取css规则、chrome扩展

    我正在开发 Chrome 扩展程序 它需要访问document styleSheets cssRules 它在某些网站上运行良好 例如w3school 但其他人则不然 比如堆栈溢出 我收到错误 Failed to read the cssR

随机推荐

  • MySql 存储过程循环光标 - 语法错误

    语法错误在哪里 DECLARE irid INT DEFAULT 0 DECLARE tmp joinid INT DEFAULT 0 DECLARE loopjoins eof INT DEFAULT FALSE DECLARE CONT
  • Python:线程可以同时读/写同一个 TCP 套接字吗?

    我想要同一个 TCP 套接字有一个读取器线程和一个写入器线程 可以吗 在访问之前我需要锁定吗 平台是Windows 7 CPython 2 7 4 对于 Unix 内核 两个线程一个读取另一个写入文件 套接字 与两个进程执行相同操作相同 由
  • 如何使用 webview url 发送标头值?

    我开发了一个带有 webview 的 android 应用程序 我想用 url 发送标头值 如果可能的话谁帮我提供一下源代码 Map
  • Java 中的泛型,使用通配符

    我有一个关于 Java 泛型的问题 即使用通配符 我有一个像这样的 GenClass 示例类 public class GenClass
  • 使用 Typescript 和 Visual Studio 2015 运行时进行编辑?

    在 Visual Studio 2013 中使用 Typescript 时 我似乎记得我可以在浏览器窗口中运行 TypeScript 源时编辑它 然后刷新浏览器窗口并获取新的更改 现在 在 Visual Studio 2015 中 Visu
  • DBpedia SPARQL 查询返回多个重复记录

    我对 SPARQL 还很陌生 并且对它现有的多种语法标准感到困惑 我正在努力使用以下查询从 DBpedia 获取唯一数据 SELECT DISTINCT Museum name abstract thumbnail latitude lon
  • Kotlin - 当前实例的返回类型

    我正在 Kotlin 中构建一个验证库 基类是abstract并实现适用于所有类型的方法 isNotNull例如 abstract class Validator
  • 通过 QTcpSocket 发送任何结构

    在写入套接字之前如何将结构转换为 char 形式 Use 数据流 它具有处理 Qt 类的字节顺序 字节顺序 和序列化的优点 简单地将结构转换为 char 可能会导致很多问题 包括字节顺序 编译器填充等 我建议使用流
  • 修改正在运行的SKAction的速度

    我有这个代码 implementation MyScene SKAction delayAction Inside a method delayAction SKAction waitForDuration 3 0 self runActi
  • 在 Rails 中批量导入 CSV?

    我正在使用 FasterCSV 将上传的文件导入到模型中 它非常适合小文件 然而 当我尝试导入大型数据集 21 000 行 时 需要很长时间 并且实时服务器上的浏览器超时 这是我当前的工作代码 logcount 0 Attendee tra
  • 在 python 中使用自定义步骤进行循环

    我可以在 python 中制作简单的 for 循环 例如 for i in range 10 然而 我不知道如何制作更复杂的 这在 C 中非常容易 如何在 python 中实现这样的 for 循环 for w n w gt 1 w w 2
  • 对三个数字进行排序的更简单方法

    有没有更简单更好的方法来解决这个问题 因为 我使用了太多变量 我用了这么多if else声明 我使用蛮力方法做到了这一点 编写一个程序 接收三个整数作为输入并按升序输出数字 不要使用循环 数组 include
  • Web API:无法序列化内容类型的响应正文

    我正在使用 ASP NET MVC 5 Web Api 我现有的应用程序包含许多 api 最近我实现了自定义 JsonConverter 它将根据时区转换日期 public class CustomInfoConverter JsonCon
  • TypeError - python 中的客户端错误

    我用 python 创建了一个客户端 服务器代码 服务器运行良好并侦听 8000 端口 但是当我通过客户端连接到它然后尝试向服务器发送消息时 出现以下错误 Traceback most recent call last File C Use
  • 如何检索 ADO.NET SqlCommand 的结果?

    我正在使用 ASP NET 我想查找表中的行数 我知道这是 SQL 代码 select count from topics 但是如何让它显示为数字呢 我想做的就是运行该代码 如果它 0 显示一件事 但如果它大于 0 显示其他内容 这是我到目
  • 如何将QLineEdit背景变成进度条

    该代码创建一个对话框QLineEdit and a QPushButton 单击按钮时我想要QLineEdit变成一个进度条 显示按下按钮触发的过程的进度 当该过程完成时QLineEdit应该恢复到正常的 LineEdit 外观 如何实现这
  • 检查字符串是否以以下结尾

    我想检查字符串是否以以下结尾 v number 例如 hello world false hello world v2 true hello world v false hello world v88 true 不完全确定如何执行此正则表达
  • “与 Google 集成”按钮消失

    这是我们的 Google Apps Marketplace 应用程序的列表 该按钮也从我们集成的每个页面上消失了 当我在应该出现该按钮的页面上查看浏览器中的控制台日志时 我看到对此网址的调用 https apis google com ad
  • 根据序列号重命名匹配的文件

    假设我有一堆 mac 屏幕截图的文件 Screen Shot 2018 11 09 at 12 37 37 PM png Screen Shot 2018 11 10 at 4 53 02 PM png Screen Shot 2018 1
  • Chartjs - 如何在 x 轴标签上获取过去 7 天的数据?

    我试图在折线图的 x 轴上获取过去 7 天的信息 使用 Chartjs 做这个的最好方式是什么 Thanks 您可以使用以下代码实例化过去 7 天的图表 let start new Date end new Date start setDa