微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Angular/chart.js:一个视图中 2 个图表的不同圆角条形图设置

如何解决Angular/chart.js:一个视图中 2 个图表的不同圆角条形图设置

我使用 Angular 11 和 ng2-charts 在我的应用程序中绘制图表。我有一个绘制水平堆积条形图的组件,并且每个图表总是只有一个条形图。我想为条形图设置圆角,因此我使用了在此堆栈闪电战中找到的代码https://stackblitz.com/edit/chart-js-horizontalbar-rounded-corners
上面 stackblitz 中的代码是为普通条形图(不是堆叠的)制作的,并在堆叠条形的每个部分的每个右侧产生圆角。所以我调整代码的方式是,只有最后一个小节在右边有圆角,但第一个在左边也有圆角。到目前为止一切顺利,就像一个魅力。

但前提是我在一个视图中只使用这个组件一次。如果我在我的视图中两次使用该组件,并且有不同数量的条形部件(堆叠条形 A 由 3 个堆叠条形组成,堆叠条形 B 由 4 个堆叠条形组成),这将不再起作用。似乎 draw 函数只能访问两个图表之一的图表数据,而不是两个图表。该函数被非常频繁地调用,当我记录图表数据时,我可以看到它只为第二个组件调用,从不为第一个组件调用。我的示例中的结果是,堆叠的条形 A 在右侧没有圆角。
您可以在 stackblitz 中看到详细信息,但我想这是相关的行:

Chart.elements.Rectangle.prototype.draw = function () {
  ...
}

这个函数表达式在我组件的构造函数中,包含圆角的所有逻辑。我不是 chart.js 的专家。在我看来,这个函数表达式改变了一些全局设置,就像一般绘制 recangles 一样。
是否有可能以某种方式从我的组件中获取图表的实例并仅将更改应用于该实例?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。