Chart.js - 绘制水平线

2023-11-30

我想使用在图表中绘制一条水平线Chart.js。但我做不到。

我读过这个问题 -Chart.js — 绘制任意垂直线- 但我无法转换绘图代码水平线不是垂直的。

我希望你能帮助我(尤其是土豆皮:))。


下面是绘制水平线的 JavaScript 代码。

var data = {
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
    datasets: [{
        data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
    }]
};

var ctx = document.getElementById("LineWithLine").getContext("2d");

Chart.types.Line.extend({
    name: "LineWithLine",
    initialize: function () {
        Chart.types.Line.prototype.initialize.apply(this, arguments);
    },
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);

        var point = this.datasets[0].points[this.options.lineAtIndex]
        var scale = this.scale
        console.log(this);

        // draw line
        this.chart.ctx.beginPath();
        this.chart.ctx.moveTo(scale.startPoint+12, point.y);
        this.chart.ctx.strokeStyle = '#ff0000';
        this.chart.ctx.lineTo(this.chart.width, point.y);
        this.chart.ctx.stroke();

        // write TODAY
        this.chart.ctx.textAlign = 'center';
        this.chart.ctx.fillText("TODAY", scale.startPoint + 35, point.y+10);
    }
});

new Chart(ctx).LineWithLine(data, {
    datasetFill : false,
    lineAtIndex: 2
});

http://jsfiddle.net/7a4hhzge/455/

这是基于用于绘制任意垂直线的代码,它可能并不完美,但您应该能够调整它以满足您的需要。

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

Chart.js - 绘制水平线 的相关文章

  • jQuery.getJSON:如何避免在每次刷新时请求 json 文件? (缓存)

    在此示例中 您可以看到生成的 HTML 列表 每次刷新时 脚本都会请求数据文件 ajax test json 并再次构建列表 生成的文件 ajax test json 被静态缓存 但是如何避免在每次刷新时请求此文件 source jquer
  • 从立即调用的匿名函数表达式返回 |它去哪里?

    如果我从立即调用的匿名函数表达式返回一个对象 它会去哪里 例如 这段代码中 foo 去了哪里 function var foo return foo 这有什么有用的应用吗 从自执行函数返回一个值而不将该返回值分配给结果变量只是一个无处可去的
  • 使用 WMI 查找服务的依赖关系,然后区分依赖的服务和依赖的驱动程序

    MSDN 上有一个代码示例 它使用 WMI 枚举特定服务的所有依赖项 http msdn microsoft com en us library aa393673 v vs 85 aspx http msdn microsoft com e
  • React 渲染中的不变违规或 React 中迭代和返回的正确方法

    我在 React 渲染中遇到了持续存在的问题 这段代码 jsx React DOM var AnswerRows React createClass componentDidMount function render function th
  • 检查 DOM 元素是否为复选框

    如何检查给定的 DOM 元素是否为复选框 设想 我有一组文本框和复选框 其中的值是动态分配的 我没有办法识别 DOM 元素是复选框还是文本框 只使用普通的 javascript 你就可以做到 if el type el type check
  • 零作为 IIFE 中的第一个参数[重复]

    这个问题在这里已经有答案了 In babeljs v6 5 1 class Foo 编译为 use strict var classCallCheck2 require babel runtime helpers classCallChec
  • JavaScript 变量赋值与 OR 对比 if 检查[重复]

    这个问题在这里已经有答案了 在 JavaScript 中 我最近意识到你可以使用 OR 赋值的逻辑运算符 我想知道这是否被认为是不好的做法 特别是 我有一些具有可选数组输入的函数 如果输入是null or undefined我应该将它设置为
  • 为什么将数据存储为元素的属性存在风险?

    我一直在读同样的东西 直接在 DOM 元素上存储属性值是有风险的 因为可能会发生内存泄漏 但有人可以更详细地解释这些风险吗 按属性 我假设您指的是 DOM 元素上的属性 DOM 元素上的自定义属性安全吗
  • JQuery 动画文本

    找到简单 简单的动画文本是非常困难的 喜欢这个网站上的 内爆 http codecanyon net item jquery text animation full screen preview 233445 http codecanyon
  • 在 JavaScript 中比较表单中的两个数字

    当我尝试比较不同的数字时 数字发生变化 但文本部分保持不变 这只发生在较大 较小的情况下 而不会发生在 NaN 或相等的情况下 这是我的代码 function check var a document getElementById a va
  • 提交前验证表单(比检查空字段更复杂)

    我有一个包含时间输入的表单 具体来说 开放时间和结束时间 当按下提交按钮时 它会转到一个 php 页面 其中这些输入将添加到数据库中 在允许提交表单之前我想检查一些事情 例如 我想确保开始时间早于 小于 结束时间 这是表格 Opens
  • 使用 Javascript / Jquery 的本地存储(不使用 HTML5)

    我想在 javascript 或 jquery 中复制本地存储概念 类似于 HTML5 但不幸的是我不知道如何开始 任何人都可以建议如何使用 javascript 或 jquery 实现本地存储 不使用 HTML5 这是一个有点愚蠢的差事
  • 使用 onBlur 事件上的值更新 React 输入文本字段

    我有以下输入字段 在模糊时 该函数调用服务来更新服务器的输入值 完成后 它会更新输入字段 我怎样才能让它发挥作用 我可以理解为什么它不允许我更改字段 但我能做些什么才能使其工作 我无法使用defaultValue因为我会将这些字段更改为其他
  • Meteor.js 登录事件

    因此 我对 Meteor 框架和 JavaScript 总体来说还很陌生 但我正在使用该框架开发一个小项目 以尝试让自己达到标准 基本上我正在开发一个微博客网站 目前 用户可以通过多种服务登录 fb google 等 我通过插入所需 url
  • 使用 Lodash 的 TypeScript:_.map(["123", " 234 "], _.trim) 返回 boolean[]?

    我有一个字符串数组 它们已像这样分割 var searchValue 600 800 123 180 var groups searchValue split gt 600 800 123 180 因此项目周围可能存在空格 并且我想删除空格
  • 为什么我需要 $(document.body) 来使用 Mootools Element 方法扩展 document.body?

    因此 在尝试让我的应用程序在最新的 IE 上运行后 结果发现 IE 不喜欢以下代码 document body getElement className Firefox 和 Chrome 响应良好 但是document bodyIE 上没有
  • 在声明组件选择器时添加指令 - Angular 7

    我正在学习 Angular 并通过单击按钮动态创建组件 我正在尝试使用 Angular Material 的拖放功能来拖动这些创建的组件以对它们进行排序 我的基本组件 html 中有以下代码 div style margin 20px di
  • Dojo/on 和捕获阶段

    有没有办法用 dojo on 在捕获阶段 而不是冒泡阶段 触发事件 我最终在这里寻找有关 on 的前身 dojo connect 的信息 就其价值而言 dojo connect 似乎不支持捕获阶段的事件侦听器 它的工作原理是将事件处理程序作
  • 使用 React React-router 登录后重定向到主页,并且 usenavigate 不起作用?

    我希望用户在成功登录后重定向到主页 我将用户登录的 api 请求的数据存储在一个名为 currentUser 的变量中 因此如果 currentUser 为 true 它应该重定向到主页 这就是我处理登录请求的方式 export const
  • Serviceworker Bug event.respondWith

    我的 serviceworker 的逻辑是 当发生获取事件时 它首先获取包含一些布尔值 而不是 event request url 的端点 并根据我正在调用的值检查该值event respondWith 对于当前的获取事件 我正在提供来自缓

随机推荐

  • Rails:表单确认消息以及提交表单中的数据

    尝试为 Rails 表单制作自定义 confirm 消息 该消息从提交的表单返回数据 而不仅仅是静态字符串 这个想法是 如果用户在柱数文本字段中输入数字 3 确认消息将显示如下 您真的确定要使用 3 个柱吗 有什么想法如何做到这一点 尝试这
  • 防止AlertView自动旋转

    我的应用程序的启动页面设置为portrait仅用这一点代码 NSUInteger supportedInterfaceOrientations return UIInterfaceOrientationMaskPortrait 当应用程序启
  • 对于 CV_CAP_PROP_FRAME_COUNT,cvGetCaptureProperty 始终返回 0!

    这是 O Reilly Learning Opencv 的代码片段 cvNamedWindow Example3 CV WINDOW AUTOSIZE g capture cvCreateFileCapture argv 1 int fra
  • 使用 C# XmlSerializer 为大量对象分块写入以避免内存不足

    我喜欢 XmlSerialize 的工作方式 如此简单 优雅 并且具有属性 p 但是 在序列化到 xml 文件之前构建所有对象的集合时 我遇到了内存不足问题 我正在从 SQL 数据库填充一个对象 并打算使用 XmlSerialize 将对象
  • 在JavaScript中,有没有办法继承Number函数?

    所以我知道我可以做到这一点 Number prototype square function return this this Function 4 square 16 有没有办法继承 Number 函数 这样我就不必修改 Number 原
  • 从 PHP 执行程序会挂起 APACHE

    您好 提前感谢您的关注 在过去的两周里 我一直在与一些让我发疯的事情作斗争 我的 Windows 机器上安装了 APACHE 2 2 22 和 PHP 5 4 3 我试图从 PHP 脚本调用一个程序 该脚本同时调用另一个程序 这两个程序都是
  • R cor(),method="pearson" 返回 NA,但 method="spearman" 返回值。为什么?

    我正在使用 R 在尺寸近似为 10 000 x 15 000 事件 x 样本 的非常大的数据矩阵上运行相关性 该数据集包含范围为 15 15 NA NaN inf 和 inf 的浮点值 为了简化问题 我选择一次处理矩阵的两行 将它们称为向量
  • 如何从 Node.js 中的 URL 加载外部 js 脚本

    我有一个在 VPS 上运行的 Node js 服务器 我想使用从另一台服务器提供的 js 脚本 例如 http example com api js 如何加载此脚本并在我的 node js 文件中使用它 Thanks exec wget h
  • for 循环中递归 $http.get

    我使用 Angular 1 5 我有一个查询类别的函数 然后对于每个类别 它查询产品 我想在检索到所有产品后显示一条消息 检索了多少个产品 它输出0 解决方案是什么 function getProducts vm categories va
  • 如何将 PCollection 转换为 python 数据流中的列表

    我有一个 PC 合集P1包含 ID 字段 我想从 PCollection 中获取完整的 ID 列作为列表 并将该值传递给 BigQuery 查询以过滤一个 BigQuery 表 执行此操作最快且最优化的方法是什么 我是数据流和大数据的新手
  • DateTime::add 会添加小时,即使间隔应该仅为秒

    这来自我之前关于获取指定数据集的平均时间间隔的问题 位于此处 1 我将再次发布整个函数 function getATBData siteID fromDate toDate global pdo ATBarray array maxATB
  • Android - 从 LocationClient 获取的位置不支持速度

    我正在使用新的 Google LocationClient 来检索地理位置 我需要获得每个点 位置 的速度 我现在正在做的是 if mLocationClient null mLocationClient new LocationClien
  • 如何使用 PHP 摘要?

    为什么要使用这样的摘要 它是否可以加快工作速度或者它的具体用途是什么 file1 php abstract class Search Adapter Abstract private ch null abstract private fun
  • 使用 Java DSL 在远程 S(ftp) 中移动已处理的文件

    一旦批处理使用 Spring 集成和 Java DSL 成功处理文件 我就会尝试在远程 SFTP 上移动文件 实现这一目标的最佳方法是什么 添加批量移动远程文件的步骤 或者使用FTP出站网关并提供MV命令 我倾向于选择第二种解决方案 让批处
  • 什么是虚拟方法?

    为什么要将一个方法声明为 虚拟 使用虚拟有什么好处 The Virtual修饰符用于标记可以在派生类中使用以下方式修改方法 属性 ect override修饰符 Example class A public virtual void Foo
  • Azure HTTP 请求超时解决方法

    目前 我们有一个托管在 Azure VM 实例上的应用程序 此应用程序有时会处理长时间运行和空闲的 HTTP 请求 这导致了一个问题 因为Azure 将关闭所有空闲时间超过几分钟的连接 我看到了一些关于设置较低 TCP keepalive
  • 如果运输方式是 Woocommerce 中的本地取货,则需要填写订单备注

    在 Woocommerce 中 我想要结账订单备注字段仅当选择本地取货作为运输方式 我已设法更改本地提货标签 以便指示客户向该字段添加详细信息 但想知道是否有一种方法不允许他们在向该部分添加详细信息之前继续操作 任何帮助将非常感激 下面的代
  • 使用空传播/空条件运算符时出错

    我在 VS 2013 中运行 NET 4 5 项目 为什么以下代码出错 var w Request Properties MS HttpContext as System Web HttpContextWrapper string IP w
  • symfony2 在构造函数中重定向

    我想在特定的情况下在构造函数中进行重定向 我尝试这样做 return new Symfony Component HttpFoundation RedirectResponse url 像这样 return this gt redirect
  • Chart.js - 绘制水平线

    我想使用在图表中绘制一条水平线Chart js 但我做不到 我读过这个问题 Chart js 绘制任意垂直线 但我无法转换绘图代码水平线不是垂直的 我希望你能帮助我 尤其是土豆皮 下面是绘制水平线的 JavaScript 代码 var da