问题标签 [ng2-charts]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
896 浏览

angular - 如何将图表标签组合在一起?

我有一个图表来显示当前季度和上一季度的数据,但我也将它显示到月份。这是我正在尝试做的图像:在此处输入图像描述

我不确定如何做到这一点,或者是否有可能。我目前正在使用 ng2-charts(基于 Chart.js),但我对任何与 Angular 2 一起使用的开源图表平台持开放态度

0 投票
5 回答
17583 浏览

javascript - Chart.js & Angular 2 - ng2-charts 自定义点击事件

我正在尝试在我的 Angular 2 项目中实现 ng2-charts,我想知道创建自定义 onclick 事件。意思是,我想覆盖购物车上的当前 onclick 事件以执行一些自定义功能(重定向到页面、显示模式等)。

有没有一种简单的方法可以做到这一点?它是内置的吗?

任何见解将不胜感激

0 投票
7 回答
31330 浏览

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

如何使用ng2-charts设置图表的高度?我正在制作折线图,就像 ng2-charts 网站上的演示一样。

我搜索了 ng2-charts 和chart.js的文档。在 chart.js 中,您似乎在 canvas 元素上设置了一个 height 属性,例如<canvas height="400">,但是该元素被 ng2-charts 组件遮盖了。

0 投票
3 回答
750 浏览

typescript - Angular2,ng2-chart在父级之前渲染子级

我目前正在Angular2TypeScript. 现在我正处于将来自hast 的数据显示在我的 ng2-chart 组件中的地步。frontendbackendbackend

我正在我的父组件 ngOnInit() 函数中加载数据。数据被推送到两个数组,它们作为我的子组件的输入,如下所示:

这里是我的服务:

这两个数组barLabelsbarData传递给子组件,如下所示:

在我的子组件中,我使用它们来创建图表:

我尝试使用一些 console.log() 断点来跟踪数据,它们似乎是相同的。

我面临的问题是,在ngOnInit()发生之前以某种方式呈现了子组件的图表,因此我的数据没有显示。我正在寻找某种更新功能,但没有成功。

希望有人能解答这个问题

塞巴斯蒂安

0 投票
1 回答
6512 浏览

chart.js - 有没有办法隐藏/自定义 ChartJS 上面的图例?

我在我的项目中使用了 ChartJS(更确切地说,ng2-charts 是在原始库之上构建的 Angular 2)。

我看到有一个选项:

图例:假|真

但是,我发现特别烦人的 tot 能够删除上面的图例(例如,它描述了折线图中的每一行)。您可以在下面看到我的意思:

在此处输入图像描述

我试过了

Chartjs 传奇造型中汲取灵感

但我认为这适用于其他一些传说(底部传说)。有没有办法自定义/隐藏上图例?

此外,是否有更改 x/y 轴标签方向的选项?(例如垂直显示它们,而不是对角线)

0 投票
2 回答
1808 浏览

typescript - ng2-chart 日期显示为 unix 时间戳

我正在Object从我的数据库中导入日期。不幸的是,日期显示为Unix时间戳(-62101391858000)。我知道可以pipes像这样格式化我的日期:{{myDate | date:medium}}但我正在使用ng2-charts,因此我必须以另一种方式解决这个问题。我的图表显示如下:

我试图找到<base-chart>,但它隐藏在ng2-charts魔法的某个地方。

关于如何解决这个问题的任何建议?

0 投票
1 回答
2759 浏览

javascript - Chart.js:如何让 x 轴标签显示在条形图中的条形顶部

我想要实现的是:

在此处输入图像描述

我为此使用ng2 图表,这只是 chart.js 的扩展。我有条形图、颜色和所有爵士乐。我想不通的是如何让 x 轴标签显示在条形图的顶部,而不是在条形图的下方。澄清一下,我不希望它出现在悬停或其他任何东西上,而不仅仅是出现在栏的顶部。

问题:需要什么配置才能让 x 轴标签显示在条形本身上?

0 投票
6 回答
26429 浏览

angular - 动态更新的 ng2-charts

是否可以动态更新任何chart内容ng2-charts?我知道还有其他类似的库angular2-highcharts,但我想使用ng2-charts. chart主要问题是单击按钮后如何重绘?我可以调整窗口大小并且数据将被更新,因此它必须是手动执行的任何选项。

https://plnkr.co/edit/fXQTIjONhzeMDYmAWTe1?p=preview

0 投票
1 回答
1988 浏览

jquery - ng2-charts 实时数据动画

我将 Angular 2 和 ng2-charts 用于需要显示实时数据的仪表板。

目前,我的问题是,当我更改与图表关联的数据时,图表会重绘所有数据点。由于这些数据将逐秒输入,因此这不适合我的目的。

我想做一些看起来像这个演示的东西:http : //www.highcharts.com/demo/dynamic-update 但我没有 highcharts 的预算。

我的代码如下:

组件.ts:

组件.html:

有谁知道我怎样才能使这个随着数据的变化而平滑地动画,而不是重新绘制整个图表?

0 投票
1 回答
267 浏览

angular - Angular 2 ng2-charts 似乎不适用于 Angular 2 RC 6 AoT 编译器

我最近将我的项目升级到 Angular 2 RC 6 并尝试 Angular 2 RC 6 AoT 编译。

在我的项目中,我正在使用 ng2-charts ( https://github.com/valor-software/ng2-charts ) 但现在当我尝试使用ngc使用 Angular 2 提前编译 (AoT) 编译我的项目时,它会在下面抛出错误:

谁能指导如何解决这个错误?