Chart.js 中折线图的背景颜色

2023-11-26

我想更改 Chart.js 生成的折线图的背景颜色。似乎没有这个选项,并且文档也没有帮助。在互联网上进行了广泛的搜索,没有得到任何结果。这可能吗?

我必须承认我对 HTML5 画布不太了解,所以我有点挣扎!


使用 Chart.js v2.1,您可以编写自己的插件来执行此操作


Preview

enter image description here


Script

Chart.pluginService.register({
    beforeDraw: function (chart, easing) {
        if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
            var helpers = Chart.helpers;
            var ctx = chart.chart.ctx;
            var chartArea = chart.chartArea;

            ctx.save();
            ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
            ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
            ctx.restore();
        }
    }
});

and then

...
options: {
    chartArea: {
        backgroundColor: 'rgba(251, 85, 85, 0.4)'
    }
}
...

小提琴 -http://jsfiddle.net/rrcd60y0/

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

Chart.js 中折线图的背景颜色 的相关文章

随机推荐

  • 与特定用户以只读方式共享 GitHub 上的私有 git 存储库

    我终于想学习如何 git 所以我正在 GitHub 上写一篇关于版本控制的相当广泛的论文 我有一个freeGitHub pro 帐户 感谢我的大学 所以我可以添加私人存储库 我需要添加我的主管 以便他可以访问这些文档 但我希望他的 GitH
  • 方法名称是否会编译到 EXE 中?

    做类 方法和变量姓名包含在邮件中将 Windows 应用程序项目编译成 EXE 后 For 混淆 名称越少 逆向工程就越困难 And for 表现 名称更短 访问速度更快 e g 因此 如果方法是通过名称调用的 保留名字short 更好的命
  • 是否可以在控制器内获取当前的 Unity 容器

    我像这样注册了统一容器 var container new UnityContainer container RegisterType
  • 在 Node.js 中管理会话? [关闭]

    Closed 这个问题是基于意见的 目前不接受答案 在 Node js 中管理会话变量的最佳方法是什么 有图书馆吗 您可以使用以下方法轻松做到这一点 连接 http senchalabs github com connect Connect
  • 如何为库设置 TypeScript 编译器,以便 Webpack 在依赖项目中删除未使用的模块?

    主题库初步说明 很抱歉占用您的时间让您阅读本文 我写它是为了回答诸如 你在做什么 之类的问题 和 你为什么要这样做 The library由大量辅助函数和类组成 在这方面它与 lodash 类似 检查lodash的结构 但与 lodash
  • Selenium / lxml:获取 xpath

    有没有get xpath方法或在 selenium 或 lxml html 中完成类似操作的方法 我有一种感觉 我在某个地方见过 但在文档中找不到类似的东西 伪代码来说明 browser find element by name searc
  • 在 data.table 的 j 参数中使用“list”

    我正在学习 data table 属性一篇博文 我试图理解 汇总表 短而窄 下的部分 首先将 data frame mtcars 强制转换为 data table gt data lt as data table mtcars gt dat
  • 异步foreach

    C 中有异步 foreach 的方法吗 其中 id s 将由该方法异步处理 而不是使用并行 ForEach This Gets all the ID s IEnumerable
  • 权限拒绝:需要 android.permission.READ_PHONE_STATE

    我正在尝试在 Android 应用程序中检测电话 但在接到电话时收到以下消息 08 23 15 16 04 685 Vodafone VFD 600 Warning 850 BroadcastQueue Permission Denial
  • 导入更多脚本会减慢 python 速度吗?

    只是想知道从其他脚本导入更多函数是否会减慢脚本的速度 一些背景 我有两个脚本 一个比另一个运行得快得多 一个在顶部有一个额外的导入语句 在底部有一个额外的函数 但它是中间的东西 这在运行较慢的脚本之间是相同的 有关您的案例的更多信息 导入
  • before_filter 与 devise

    我正在使用 Devise 的内置功能before filter authenticate user 如果用户未通过之前过滤器 尝试在注销时执行操作 我想在应用程序帮助程序中调用我自己的自定义方法 我可以如何以及在哪里执行此操作 我会在过滤器
  • 在 Chrome 扩展程序中重定向 URL

    访问给定 URL 时 如何在扩展程序中重定向 chrome 例如 当我访问http yahoo com 我希望它重定向到http google com NOTE 这个问题的前一个版本询问是否有任何 Google Chrome 扩展程序可以在
  • Git - 重复提交问题

    我不小心在我的存储库中创建了 未知 的提交 并决定尝试从here git filter branch commit filter if GIT COMMITTER NAME unknown then GIT COMMITTER NAME G
  • Delphi找不到System.dcu;默认路径设置应该是什么?

    每当我尝试编译某些内容时 都会出现此错误 F1027 未找到单元 System pas 或二进制等效项 dcu 安装组件后得到它 删除它 重新安装 RAD studio 但仍然一样 为了修复它 我需要库路径 and 浏览路径 请任何人发布你
  • F# 在实际处理 int64 时假设 int

    正在经历欧拉计划在尝试学习 F 时 我在编写解决方案时偶然发现了一个似乎是类型推断的问题问题3 这是我写的 let rec findLargestPrimeFactor p n if n 1 then p else if n p 0 the
  • 缓存 JNI 对象和线程安全(在 Android 中)

    我正在编写一个带有本机线程 pthreads 的 C 应用程序 我需要调用一些 Java 方法等 我不确定哪些 JNI 对象可以安全地缓存 即存储在我的 C 对象中以供以后使用 可能 可能由不同的线程 我确实知道 如果我的类的方法可以由不同
  • 多个DbContext、多个Database.SetInitializer

    我创建了两个 DbContext 一个用于应用程序配置 第二个用于日志记录 原因是 我想在日志记录数据库上设置最大大小 这样它就不会耗尽所有可用磁盘空间并阻止其他数据库工作 在我的 global asax cs 文件中 我有以下内容 pro
  • 即使我在 Firebase 控制台中更新了 sha1,在 Play 商店中发布 .apk 后,Firebase 电话身份验证也无法正常工作

    Firebase 电话身份验证在之后不起作用 apk即使我更新后也在Play商店发布sha1之后我在 firebase 控制台中生成了 google services json再次更新 a ndroid studio 项目中的 json 文
  • 如何在散点图中画线

    我不敢相信这是如此复杂 但我尝试并用谷歌搜索了一段时间 我只想用一些图形特征来分析我的散点图 首先 我想简单地添加一行 所以 我有几 4 个点 我想在其中添加一条线 就像这个图中一样 来源 http en wikipedia org wik
  • Chart.js 中折线图的背景颜色

    我想更改 Chart js 生成的折线图的背景颜色 似乎没有这个选项 并且文档也没有帮助 在互联网上进行了广泛的搜索 没有得到任何结果 这可能吗 我必须承认我对 HTML5 画布不太了解 所以我有点挣扎 使用 Chart js v2 1 您