ChartJS 禁用图表区域外的网格线

2023-12-23

我试图隐藏在图表区域之外绘制的网格线,所以基本上类似于下面的选项,但对于图表区域之外

gridLines: {
  drawOnChartArea: false,
},

想必您正在寻求禁用刻度线,这可以通过drawTicks财产:

new Chart(document.getElementById('canvas'), {
  type: 'bar',
  data: {
    labels: ['a', 'b', 'c'],
    datasets: [{
      label: 'series1',
      data: [1, 2, 4]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        gridLines: {
          drawTicks: false
        },
        ticks: {
          padding: 10
        }
      }],
      yAxes: [{
        gridLines: {
          drawTicks: false
        },
        ticks: {
          beginAtZero: true,
          padding: 10
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="canvas">
gridLines:
  drawTicks: false;
}

请参阅文档 https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration了解更多信息。

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

ChartJS 禁用图表区域外的网格线 的相关文章

  • 未捕获的 ReferenceError:未定义 require - Chart.js

    我使用 Chart js 新版本 作为 但是当我在 chrome 中演示时 出现错误 chart js 4 Uncaught ReferenceError require is not defined Image https i stack
  • 内联插件不起作用

    根据Chart js 文档 http www chartjs org docs latest developers plugins html 以下代码应该可以工作 new Chart document getElementById char
  • 当鼠标悬停时,Chartjs 显示标签和单位统计

    当我的鼠标指针悬停在图表上时是否可以显示标签和单位 目前只有数字 对于下面的例子 我想展示 58 标签1 0 标签2 0 标签3 0 标签4 0 标签5 我的选项如下所示 var options Boolean Show a backdro
  • Chartjs 在鼠标悬停时非常快速地调整大小(闪烁)

    我在基于引导的页面中有一个图表 我试图在页面调整大小时调整它的大小 以遵循响应式设计的变化 所以我有这段代码 function redrawChart var w chart container width var c document g
  • 如何为 Chart.js (chartjs.org) 中的所有图表类型添加标签/图例?

    Chart js 的文档提到了 图例模板 但没有提供此类图例的资源或示例 这些如何显示呢 您可以在图表选项中包含图例模板 legendTemplate takes a template as a string you can populat
  • 无法读取未定义的属性“标签”

    我刚刚学习 Chart js 的工作原理 因此我直接使用了 Chart js API 页面上的示例代码 但它似乎不起作用 我将以下代码放入脚本标记中 并收到 无法读取未定义的属性 标签 错误 不确定这个错误意味着什么 function va
  • 如何防止标签在移动屏幕 Chart.js 上重叠

    我正在使用这个例子jsfiddle https jsfiddle net Trekels fec0v5kj 但是当我使用小屏幕时标签开始像这样重叠 我可以做什么来预防它 我想让它完全响应 我尝试改变长度和其他长宽比等 但没有成功 var c
  • 使 Chart.js 在悬停时在散点图中的点之间呈现一条线

    我有一个包含两个数据集的简单散点图 active and passive const data datasets label Active sentences A1 A2 A3 data 0 4340433805869016 0 12813
  • Chart.js如何获得组合条形图和折线图?

    我想问一下使用 Chart js 是否可以http www chartjs org http www chartjs org 获得组合条形图和折线图 感谢您的任何建议 下面的答案与 Chart js 1 x 有关 Chart js 2 x
  • Chart.js 刻度线和 X 轴之间的空间

    我正在使用 Chart js 版本 3 x 制作一个简单的画布 它只是显示价格的演变 X 轴用于时间 Y 轴用于进化百分比 我已经成功做到了这一点 但现在 我想添加一些风格 我的目标是在标记刻度和 X 轴之间添加一些空间 我用过chart
  • 如何使用 Chart.js 在标签中放置新行?

    我有一个使用 Chart js 的带有标签的数据集 我想用换行符将标签分成两行 我努力了 br and n 两者都不起作用 labels A br Waking B C D labels A nWaking B C D 第一个标签应该输出如
  • 使用chartJS显示带有连接点的折线图

    我想使用 ChartJS 绘制这样的图表 但我找不到连接第一个和最后一个点并在该连接区域内显示单个唯一点的解决方案 我还需要用不同的颜色设置每个点的样式 我尝试探索 ChartJS 文档但找不到解决方案 是否有任何图表绘制库具有这些功能或如
  • 图表js不显示

    我正在尝试使用 Charts js 创建一个简单的折线图 当我运行下面的代码时 没有出现图表 我究竟做错了什么 我正在关注这个教程http www chartjs org docs latest getting started http w
  • 更改react-chartjs 2中的工具提示方向

    我已经实现了react chartjs2https www npmjs com package react chartjs 2 https www npmjs com package react chartjs 2在我的反应应用程序中 我已
  • 如何删除所有网格线、边框并仅显示 ChartJS 水平条形图上的刻度线

    继答案之后这个帖子 https stackoverflow com questions 75433450 how to use chartjs to plot a single row of colored bars with a time
  • Chart.js - 如何将数组集合推入数据集

    我一直在尝试多种方法将数组集合推送到数据集中 任何人都可以帮助我根据下面的代码将数组推入堆积图表中 这是例子 Codepen 堆叠栏 https codepen io narendrajadhav pen abzpWam JavaScrip
  • Chartjs + Angular6 未显示图表或任何错误

    我正在尝试以角度实现chart js 编写了一个简单的代码来在html上显示图表 但是页面上没有输出 也没有错误 我不明白问题出在哪里以及为什么显示图表失败 堆栈闪电战 https stackblitz com edit angularch
  • Chart.js 点击标签,使用条形图

    我需要有关 Chart js 交互性的帮助 当我单击标签时 我需要返回我单击的列 索引 号 我尝试使用 getElementsAtEvent 但只有当我直接单击图表时它才有效 This http jsfiddle net yxz2sjam
  • 将 Chart.JS 的 Y 轴格式设置为时间

    我有下面这个图表 我想使用时间来缩放 Y 轴 时间不是一天中的时间 而是总小时 分钟 秒 所以可能超过 24 小时 似乎无法让它工作 我得到的只是一个空白屏幕 当然这是一个语法错误 但无法发现它 谢谢 var ctx document ge
  • TypeScript问题如何在Chart.js和react-chartjs-2的自定义插件中传递参数

    我创建了一个自定义插件horizontalArbitraryLine import Plugin from chart js export const horizontalArbitraryLine Plugin id horizontal

随机推荐

  • 具有调用私有方法的静态方法的 Ruby 类?

    我有一个包含许多静态方法的类 每个人都必须调用一个通用方法 但我试图不公开后一个方法 将其设置为私有将只允许从该类自己的实例进行访问 protected 似乎也不能解决这里的问题 如何隐藏 do calc 以免在静态上下文中被外部调用 使其
  • 从 php 调用 wordnet(PHP 的 Wordnet 类或 API)

    我正在尝试编写一个程序来查找两个文档之间的相似性 由于我只使用英语 所以我决定使用wordnet 但是我找不到将wordnet与php链接的方法 我无法从php找到任何wordnet api 我在论坛上看到有人说 Spudley 他从 ph
  • 如何在 Jest 中使用 axios 模拟 API 调用?

    我是测试新手 对使用 ES6 类模拟 API 和 axios 实例有一些疑问 我有一个index js import axios from axios export default class Pushkin constructor thi
  • 结构体和结构体第一个成员之间的指针别名[重复]

    这个问题在这里已经有答案了 C 中的指针别名通常是未定义的行为 因为严格别名 但 C11 标准似乎允许对指向结构的指针和指向结构的第一个成员的指针进行别名 C11 6 7 2 1 15 指向结构对象的指针 指向其初始成员 反之亦然 那么下面
  • 替代设置按钮

    我在我的android项目中使用这个代码 alertDialog setButton OK new DialogInterface OnClickListener public void onClick DialogInterface di
  • 并行流可以在不同的操作下正常工作吗?

    我正在阅读有关无国籍状态的文章 并在doc https docs oracle com javase 8 docs api java util stream package summary html Statelessness 如果流管道结
  • 在 .NET Framework 应用程序中使用 .NET Core 类库

    我的 NET Core 类库为我的数据库提供了一个模型 我的 WPF 应用程序需要引用该类库才能访问数据库 是否可以将 WPF 应用程序的引用添加到类库并使用此模型 我的类库基于 NET Core 3 1 构建 我的 WPF 应用程序基于
  • 如何使用 Citrix ShareFile API 进行搜索

    我正在为一个项目使用 Sharefile REST API 但遇到了问题 他们缺乏文档 到目前为止 我向 api 地址发送的 5 封电子邮件都没有得到答复 我想我会众包这个 我需要做的是按文件名搜索文件 并且它还必须有一个特定的parent
  • 是否有可能以某种方式使该程序崩溃?

    我目前正在大学的一门课程中学习 C 现在我们有一个任务要解决 但我不知道该怎么做 任务如下所示 是否有可能让这个程序因用户输入而崩溃 如果是这样 请解释一下这种情况 我们得到的程序非常简单 如下所示 include
  • 如何从glm结果中得到方程

    我创建了一个逻辑回归glm功能 mynewlogit lt glm is bad ulmp s ratio plmp mac all 60d plmp est mac all 90d plmp c mac all 90d lmp s rat
  • apt-get update 非交互式

    我正在尝试进行完全非交互的更新 在 ubuntu 14 04 3 LTS 上 我认为使用这种类型的命令会很容易 export DEBIAN FRONTEND noninteractive apt get update apt get upg
  • 使用 Delphi 获取全文提要

    我正在开发一个 Delphi 程序 它通过组件 Indy idHTTP 读取提要的源代码 但是提要看起来并不完整 只显示其摘要 我的意思是提要不显示 内容 标签 我认为可以获得全文提要 因为我在互联网上找到了一些网站 例如http full
  • 如何在列表框中的项目之间添加填充?

    我想知道是否有办法在我的订单项之间添加填充 这是一种用于平板电脑的表单 每个表单之间的空间可以让您更轻松地选择不同的项目 有人知道我该怎么做吗 有一个ItemHeight财产 你必须改变DrawMode财产给OwnerDrawFixed使用
  • 无法使用 Ajax.BeginForm() 异步上传文件

    我正在尝试使用 Ajax BeginForm 上传文件 但没有成功 我的观点包含 using Ajax BeginForm UploadFile null new AjaxOptions HttpMethod POST UpdateTarg
  • 如何从 mongoose 中的实例方法访问静态方法?

    如何从 mongoose 中的实例方法访问静态方法 我有一个名为 Job 的工作模型 我想从实例方法 job start 调用静态方法 Job someStatic 如何从实例方法中的 this 获取对作业的引用 thanks 我发现通用地
  • 如何通过Weblogic Java API检索Weblogic的Deployment测试点

    我正在开发一个基于 JMX 的 Weblogic 健康监控代码库 我正在尝试获取所有部署测试点的列表 http地址 如下面的快照所示 并查看该网址是否可访问 有没有办法访问 Weblogic 的 Java API 中这些测试点的列表 他们在
  • 如何在 CMake 项目上运行 Visual Studio CPU 分析器?

    我正在尝试使用 Visual Studio 2022 及其分析工具来分析使用 CMake 项目构建的 C 应用程序 我以 RelWithDebInfo 模式和 MSVC x64 x64 工具集构建项目 我添加了这个片段 if MSVC se
  • 用于单元测试的模拟休息模板

    我想嘲笑一个RestTemplate在 Spring Boot 中 我在方法中进行 REST 调用 为了测试我正在创建的微服务的控制器 我想测试微服务控制器内的方法 例如 GetMapping value getMasterDataView
  • 更改 UISegmentedControl 的字体大小

    谁能告诉我如何更改字体类型和大小UISegmentedControl 我遇到了同样的问题 此代码设置整个分段控件的字体大小 类似的东西可能适用于设置字体类型 请注意 此功能仅适用于 iOS5 Obj C UIFont font UIFont
  • ChartJS 禁用图表区域外的网格线

    我试图隐藏在图表区域之外绘制的网格线 所以基本上类似于下面的选项 但对于图表区域之外 gridLines drawOnChartArea false 想必您正在寻求禁用刻度线 这可以通过drawTicks财产 new Chart docum