Chart.js 圆环图大小调整

2024-02-08

我在用着ng2 图表 https://github.com/valor-software/ng2-charts在 Angular 项目中。我有该项目的两个版本。当前的生产版本是旧版本,并且使用旧版本的 ng2-charts(以及扩展的 Chart.js)。我正在努力升级该项目。不过我遇到过一些奇怪的事情。

我使用的是 ng2-charts 中的圆环图,旧版本中图表加载的默认大小是 1:1 的比例:

您可以看到它加载时的高度和宽度均为 240 像素。奇怪的是,在较新版本的 ng2-charts/chart.js 中,宽高比为 2:1:

我在新版本中使用相同的选项、相同的设置等。唯一的区别是软件包版本。

Chart.js 是否有一个设置可以帮助我解决这个问题?我喜欢旧图表的大小,但如果不允许,就无法让新图表做到这一点canvas图表的内容会渗出我的组件,出于明显的原因,我不希望这样做。


Set aspectRatio: 1 in the options提供给 Chart.js 的对象以获取您要查找的内容。默认aspectRatio当前版本中为 2(曾经一度为 1,但为了提高向后兼容性而将其恢复)。正如您可能猜到的,将其设置为 0.5 会导致height元素的宽度是宽度的两倍。

Codepen https://codepen.io/anon/pen/rvaEvZ(这支笔取自this https://github.com/chartjs/Chart.js/issues/5432Github 问题)

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

Chart.js 圆环图大小调整 的相关文章

随机推荐

  • 仅列出已停止的 Docker 容器

    Docker 为您提供了一种列出正在运行的容器或所有容器 包括已停止的容器 的方法 这可以通过以下方式完成 docker ps To list running containers Or by docker ps a To list run
  • 有没有办法找到重复的单词?

    我正在尝试找到 制作一个程序来查找 Excel 中所有重复的单词 例如 在 A1 中的 某人 在 A2 中的 某人 等 但我会多次出现 某人 或另一个单词 我需要将这些信息压缩在一起 但我需要以一种我不这样做的方式来做到这一点无法手动搜索来
  • 在开发中如何向 Django 提供 CSS?

    我已经阅读了所有文档 但它对我来说没有意义 我运行了collectstatic 我在我的应用程序和项目目录中设置了 static 目录 我将STATIC URL和STATIC ROOT添加到我的settings py文件中 但我不知道如何知
  • 尝试快速将协议添加到类签名中

    我正在尝试快速创建应用内购买 在我的班级签名中 我有以下内容 class ViewController UIViewController UITextFieldDelegate UIAlertViewDelegate SKStoreProd
  • 在 Tensorboard 投影仪中可视化 Gensim Word2vec 嵌入

    我只看到了几个提出这个问题的问题 但没有一个有答案 所以我想我不妨尝试一下 我一直在使用 gensim 的 word2vec 模型来创建一些向量 我将它们导出为文本 并尝试将其导入到嵌入投影仪的张量流实时模型中 一个问题 没用 它告诉我张量
  • nginx 背后的 ASP.NET 5

    我在 Nginx 服务器后面有一个 ASP NET 5 MVC6 应用程序 充当反向代理 它的配置是 server listen 80 server name example com location proxy pass http loc
  • 使用 Mockito 和 PowerMockito 模拟类对象

    是否可以使用 Mockito 和 或 PowerMockito 模拟类对象 就像是 Class
  • Java泛型如何接受泛型参数中的任何派生类型

    在下面2行代码中 HashMap
  • Eclipse 如何终止正在运行的程序?

    在 Eclipse 中 当您运行程序时 有一个漂亮的红色方形按钮可以停止它 我想知道这是如何做到的 Eclipse 是否只是残酷地杀死相应的进程 或者在温和地要求它终止自身或其他什么之前对进程状态进行一些很好的安全验证 是的 Eclipse
  • Docker postgres 无效的主检查点记录

    我一直在尝试让 postgres 在 Docker 在 Windows 上 中运行并具有持久数据存储 并认为我终于拥有了它 但现在当我尝试启动容器时 出现以下错误 LOG invalid primary checkpoint record
  • 是否可以将自定义元数据添加到 Lucene 字段?

    我已经到了需要存储一些有关 Lucene Net 索引中特定字段来自何处的附加数据的地步 具体来说 我想在将字段添加到文档时将 guid 附加到文档的某些字段 并在从搜索结果中获取文档时再次检索它 这可能吗 Edit 好吧 让我举个例子来澄
  • 如何动态更改引导程序模态体

    所以我将 Bootstrap 模态定义为 div class modal fade div class modal dialog modal sm div class modal content div class modal header
  • 如何在Android应用程序中读取和使用网站内容

    我实际上必须在 Android 应用程序中阅读和使用某些网站的内容 到目前为止 我主要使用两种不同的代码来获取网站的内容 但它们对我不起作用 public static String connect String url String re
  • 将 django 默认 pk 与 AutoField 更改为 BigAutoField

    我的模型有一个带有 AutoField 整数 的默认 pk 但后来我发现我需要使用 BigAutoField 然后我还有引用学生模型的其他模型的数据 我如何将 pk 字段更改为 BigAutoField 并反映在其他引用模型上 class
  • 当我尝试使用 vue js 显示 JSON 数据时,Selectpicker 不起作用?

    当我写 selectpicker selectpicker refresh 时在控制台中它正在加载 我应该在哪里提供此代码 我的 HTML 代码是
  • 错误 1045 (28000):用户“root”@“localhost”的访问被拒绝

    所以我第一次安装了MySQL应用程序 首先我看到命令行客户端没有打开 所以我寻找解决方案 他们说我必须进入 bin 目录并手动运行它 在我运行cmd之后mysql uroot p运行它并输入密码 它给了我错误 错误 1045 28000 用
  • 剪刀石头布 - Python 3 - 初学者

    我想模拟一个石头剪刀布游戏 这就是我到目前为止所拥有的 它不允许我在其中输入字母scoregame功能 我怎样才能解决这个问题 def scoregame player1 player2 if player1 R and player2 R
  • 防止选项卡循环浏览地址栏

    我意识到这可能是一个可访问性问题 最好不要管它 但我想弄清楚是否可以阻止选项卡在选项卡循环中访问地址栏 我的应用程序有另一种循环输入区域的方法 但许多新用户本能地尝试使用该选项卡 但它无法按预期工作 这是一个通用的 jquery 实现 您不
  • Selenium Instagram 机器人 - 单击“喜欢”按钮

    我已经编写了一个程序来访问 Instagram 探索页面 并喜欢前六张照片 现在 我正在使用这种相当复杂的方法来查找 喜欢 按钮 我更愿意将其格式化为 单击登录按钮 部分 到目前为止 我已经尝试检查各种元素 但我无法确定正确的元素以使其唯一
  • Chart.js 圆环图大小调整

    我在用着ng2 图表 https github com valor software ng2 charts在 Angular 项目中 我有该项目的两个版本 当前的生产版本是旧版本 并且使用旧版本的 ng2 charts 以及扩展的 Char