如何通过ng2-charts angular使用chartJs的自定义渲染方法?

铁木金花

我在这里有一个JFiddle示例,它的条上有圆角曲线:https ://jsfiddle.net/qjae6xyp/

您会在条形图的顶部看到曲线。在此处输入图片说明下面有一个方法可以画那些角

Chart.types.Bar.extend({
    name: "BarAlt",
    initialize: function (data) {
        Chart.types.Bar.prototype.initialize.apply(this, arguments);

        if (this.options.curvature !== undefined && this.options.curvature <= 1) {
            var rectangleDraw = this.datasets[0].bars[0].draw;
            var self = this;
            var radius = this.datasets[0].bars[0].width * this.options.curvature * 0.2;

            // override the rectangle draw with ours
            this.datasets.forEach(function (dataset) {
                dataset.bars.forEach(function (bar) {
                    bar.draw = function () {
                        // draw the original bar a little down (so that our curve brings it to its original position)
                        var y = bar.y;
                        // the min is required so animation does not start from below the axes
                        bar.y = Math.min(bar.y + radius, self.scale.endPoint - 1);
                        // adjust the bar radius depending on how much of a curve we can draw
                        var barRadius = (bar.y - y);
                        rectangleDraw.apply(bar, arguments);

                        // draw a rounded rectangle on top
                        Chart.helpers.drawRoundedRectangle(self.chart.ctx, bar.x - bar.width / 2, bar.y - barRadius + 1, bar.width, bar.height, barRadius);
                        ctx.fill();

                        // restore the y value
                        bar.y = y;
                    }
                })
            })
        }
    }
});

但是问题是我有角度的项目并使用ng2-charts。https://stackblitz.com/edit/ng2-charts-bar-template-kkmuqx?file=src/app/app.component.ts

在此处输入图片说明

这个例子是我的角度项目的演示,这里有horizo​​ntalBar图表。我一直在寻找很多天,以便在ng2-charts上实现此圆角功能,但是我无法通过angular访问该自定义方法ng2-charts。如果有人能提出我的stackblitz示例来展示应如何实现,我将非常高兴。

https://stackblitz.com/edit/ng2-charts-bar-template-kkmuqx?file=src/app/app.component.ts

uminder

这个类似问题的答案提供了可以与Angular一起使用的出色代码ng2-charts它使用该Chart.elements.Rectangle.prototype.draw功能。我对其进行了略微调整,以适应您的需求。

在此处输入图片说明

请看下面的StackBlitz

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何对json数据使用angular-charts?

来自分类Dev

如何使用cocoapods导入Charts.xcodeproj?

来自分类Dev

Angular2的自定义渲染器

来自分类Dev

使用lite-server进行ng2应用开发,如何使用php?

来自分类Dev

Angular 2 ng2如何在模板中使用TypeScript枚举?

来自分类Dev

如何使用ng2-charts设置图表的高度

来自分类Dev

如何在Angular 2中使用ng2文件上传提交帖子数据?

来自分类Dev

Chart.js和Angular 2-点击事件中的ng2-charts自定义

来自分类Dev

如何在调整窗口大小时保持chartjs / ng2-charts渐变?

来自分类Dev

测试Angular应用时出现ng2-charts错误

来自分类Dev

如何在Doughnutchart ng2 chart.js中自定义百分比标签

来自分类Dev

带有ng2-charts的chartjs-plugin-annotation的正确配置位置?

来自分类Dev

如何与ng2文件一起提交输入数据上传Angular ION

来自分类Dev

如何在Python Google Charts中使用自定义属性aviz_api.py

来自分类Dev

Angular2 + Chart.js和ng2-charts。数据绑定无法正常工作

来自分类Dev

Angular 2 ng2如何在模板中使用TypeScript枚举?

来自分类Dev

如何在Angular 2中使用ng2文件上传提交帖子数据?

来自分类Dev

ng2-charts自定义“栏”类型

来自分类Dev

Angular2 @ViewChild没有从ng2-charts提取BaseChartDirective

来自分类Dev

如何在 ng2 中使用 karma 测试订阅

来自分类Dev

如何在自定义 Ng2 表单元素中访问 NgFormControl

来自分类Dev

如何在 ng2-charts 中使用 Group Stacking?

来自分类Dev

ng2-charts - Angular 4 工作示例

来自分类Dev

Angular2 Ng2 文件上传 CORS 问题

来自分类Dev

(ng2-charts, angular) AOT 后圆环图不显示?(但填充文本正在工作)

来自分类Dev

Chartjs 如何在 X 轴下渲染自定义地平线

来自分类Dev

ngx-chips (ng2) 标签输入组件自定义主题不起作用

来自分类Dev

如何使用 ios-charts 创建游标

来自分类Dev

如何使用 ios-charts 库在烛台图中创建自定义限制线标签?

Related 相关文章

  1. 1

    如何对json数据使用angular-charts?

  2. 2

    如何使用cocoapods导入Charts.xcodeproj?

  3. 3

    Angular2的自定义渲染器

  4. 4

    使用lite-server进行ng2应用开发,如何使用php?

  5. 5

    Angular 2 ng2如何在模板中使用TypeScript枚举?

  6. 6

    如何使用ng2-charts设置图表的高度

  7. 7

    如何在Angular 2中使用ng2文件上传提交帖子数据?

  8. 8

    Chart.js和Angular 2-点击事件中的ng2-charts自定义

  9. 9

    如何在调整窗口大小时保持chartjs / ng2-charts渐变?

  10. 10

    测试Angular应用时出现ng2-charts错误

  11. 11

    如何在Doughnutchart ng2 chart.js中自定义百分比标签

  12. 12

    带有ng2-charts的chartjs-plugin-annotation的正确配置位置?

  13. 13

    如何与ng2文件一起提交输入数据上传Angular ION

  14. 14

    如何在Python Google Charts中使用自定义属性aviz_api.py

  15. 15

    Angular2 + Chart.js和ng2-charts。数据绑定无法正常工作

  16. 16

    Angular 2 ng2如何在模板中使用TypeScript枚举?

  17. 17

    如何在Angular 2中使用ng2文件上传提交帖子数据?

  18. 18

    ng2-charts自定义“栏”类型

  19. 19

    Angular2 @ViewChild没有从ng2-charts提取BaseChartDirective

  20. 20

    如何在 ng2 中使用 karma 测试订阅

  21. 21

    如何在自定义 Ng2 表单元素中访问 NgFormControl

  22. 22

    如何在 ng2-charts 中使用 Group Stacking?

  23. 23

    ng2-charts - Angular 4 工作示例

  24. 24

    Angular2 Ng2 文件上传 CORS 问题

  25. 25

    (ng2-charts, angular) AOT 后圆环图不显示?(但填充文本正在工作)

  26. 26

    Chartjs 如何在 X 轴下渲染自定义地平线

  27. 27

    ngx-chips (ng2) 标签输入组件自定义主题不起作用

  28. 28

    如何使用 ios-charts 创建游标

  29. 29

    如何使用 ios-charts 库在烛台图中创建自定义限制线标签?

热门标签

归档