问题标签 [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 投票
1 回答
5023 浏览

javascript - Angular2 @ViewChild 没有从 ng2-charts 获取 BaseChartDirective

我正在使用 ng2-charts v1.5.0,我正在尝试让图表在单击后使用新数据进行更新。我正在关注其他人发布的示例。

在我看来,我有:

如果我写:

然后我得到:

如果我写:

然后我打电话this.chart.ngOnChanges({});,但我得到:_this.chart.ngOnChanges is not a function

这对我来说没有意义。如何获得作为参考的正确视图子项BaseChartDirective

0 投票
3 回答
4467 浏览

angular - ng2-charts:设置颜色不起作用

我的图表定义为:

我将颜色指定为:

一切正常,但颜色。如果我传入这个数组,所有颜色都显示为相同的颜色,浅灰色。任何人都看到什么可能是错的?

0 投票
1 回答
1535 浏览

angular - ng2-charts 访问 chartjs 对象以应用 chartjs 功能

我正在使用 ng2-charts 并且需要更多控制。

xAxis 值范围应该动态变化。为此,我需要访问 ng2-charts 使用的 Chart-Object。然后我可以这样

这基本上归结为两个步骤:

我尝试了这个解决方案,但似乎不推荐使用 getComponent() 。为了避免这种情况,我尝试使用@ViewChild(有和没有ElementRef),这将导致在接收到的对象上未定义属性“图表”。

查看 ng2-charts 中的 chartjs 实现,我可以看到 BaseChartDirective 控制图表的生成并将生成的图表存储为类属性(this.chart)。但是我不确定如何在我的组件中访问此属性。

ng2-charts 是一个模块,因此是我的 @NgModule 导入的一部分。

0 投票
2 回答
11130 浏览

angular - ng2-charts 自定义悬停在条形图上时显示的工具提示的数据和整个 html 内容

我正在使用来自 valor 软件的 ng2 图表和我的 angular 2 应用程序。我无法弄清楚如何自定义将鼠标悬停在条形图上时显示的默认工具提示的整个 html 内容。

有任何想法吗?

更新:

这是我的 html/标记代码:

在我的打字稿类中,我实现了 barChartOptions 函数:

定制一些东西,但这似乎真的很有限。例如,我可以使用 label 属性更改标签等:

但是,我看不到如何添加其他标签。使用 ng2-charts,如果我有一个包含两个数据集的条形图,并将鼠标悬停在一个条上,则它仅显示该条的标签和数据,但不显示第二个数据集的第二个条的数据。我想同时显示两者,但不知道如何为此添加额外的标签和数据。

0 投票
4 回答
6523 浏览

javascript - ng2 图表 - 刷新饼图

我正在使用 ng2-charts - https://github.com/valor-software/ng2-charts

我有一个饼图,如果我在我的 component.ts 文件顶部声明变量时对数据进行硬编码,就像我的饼图显示的示例一样。

但我显然想让饼图数据动态化。我可以通过一个服务(是一个数字)调用数据,将数字添加到数据数组中,饼图不起作用。但是,如果我执行控制台日志,则数组会打印出我添加到其中的新数据/数字。

我需要以某种方式重新绘制表格。想不通怎么弄。

0 投票
1 回答
587 浏览

angular - Angular2 和 ng2-charts 不显示任何图表

我需要在我的项目中实现一些图表,内置 Angular2(版本 2.4.8),我使用 ng2-charts(版本 1.5.0),chart.js 使用的版本是 2.5.0。首先,我从 ng2-charts 网站复制了一个示例代码,我没有错误,但没有图表... ng2-charts 与 Angular2 的一些重大变化?

我使用图表的组件:HomeComponent.ts

视图:HomeView.html

系统js:systemjs.config.js

我的应用模块:app.module.ts

索引.html:

我已经尝试过使用 src/chart.js ,例如网站示例,但会出错(未定义要求)和 dist/Chart.js 但相同,也就是没有显示...

经过 4 小时的搜索后,我求助于您……一些想法?谢谢

0 投票
16 回答
64250 浏览

javascript - ng2-charts 更新标签和数据

我正在尝试使用 ng2-chart 动态创建图表,我从 angular 2 服务获取信息,当我只更改图表的标签时它有效,当我更改数据时只有它有效,但是当我同时更改时,数据都会更新在图表中。有任何人解释这种奇怪的行为。

我的模板:

我的课 :

0 投票
2 回答
11916 浏览

angular - Angular 2 ng2-charts 甜甜圈文本在中间?

我在角度 2 中使用来自 ng2-charts ( http://valor-software.com/ng2-charts/ ) 的圆环图。我一直在寻找将文本放在中间但没有成功的选项。我已经在 ng-chart 选项中搜索了 chart.js(依赖项)。您知道在 Angular 2 打字稿中实现这一目标的另一种方法吗?还是我缺少什么?

0 投票
0 回答
1834 浏览

angular - 无法让 ng2-charts 工作。[ng2-charts(未找到)zone.js]

我已经关注了网站上的所有内容:http: //valor-software.com/ng2-charts/

  1. npm install ng2-charts --save
  2. npm install chart.js --save

然后我在我的 HTML 中添加了这个脚本链接:

接下来我添加了我的导入语句:

在此处输入图像描述

由于 import 语句,我现在在 zone.js 代码中出现错误。

GET http://localhost:3000/ng2-charts 404(未找到) zone.js:2019

这是导入 ng2-charts 的正确方法吗?或者我错过了什么。我对angular2相当陌生。

0 投票
1 回答
2021 浏览

html - 当图表数据同时更新时,ng-charts 不更新标签

当我同时更新图表数据时,我的 ng2-charts 组件没有更新其标签ngOnChanges()

如果我成功注释掉ngOnChanges()UI 中标签更新中的数据变量更新。如何更新我的数据和标签?

我会包括我的 HTML 和调用类,但看不到明显的问题 - 如果你要求它,我会在这里发布。

为什么当我取消注释我的数据更新时标签不更新......数据更新得很好(以及其他图表变量)

我的 package.json 显示了以下图表库

“chart.js”:“^2.4.0”,“ng2-charts”:“^1.5.0”,