问题标签 [ngx-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 回答
398 浏览

typescript - ngx-charts-pie-chart angular5 库数据格式

ngx-charts在我的项目中使用该库。

onSelect方法返回一个具有两个属性的对象:valuename。尽管我的类型any[]列表是具有三个属性的对象列表valuenameid.

在源代码中,我发现该方法只发出valueandname属性。

我可以修改源文件还是有另一种方法来改变它在 onSelect 方法中通过点击事件返回的内容?

0 投票
1 回答
414 浏览

javascript - 添加 ngx-charts 的依赖以集成组合图

我正在使用带有库的 angular5"@swimlane/ngx-charts": "^8.0.0"

我需要添加一个库来使用 combo-chart 因为在 ngx-charts 默认安装不包括 combo-chart 。

这是 ngx 组合图表的演示

这是组合图的源代码

我需要在我的项目中使用组合图。

请问如何将组合图集成到 angular5 项目中?

0 投票
4 回答
6154 浏览

javascript - 如何使用 yAxisTickFromatting 使 ngx-Charts Bar 上的百分比 yAxis 垂直?

我目前正在使用 NGX-Charts 8.0.2 版,特别是垂直条形图。

我正在查看条形图的文档,并试图弄清楚如何用百分比格式化 x 轴刻度。

例如:20% 30% 40% 50% 等。

我做了一些挖掘,发现了这个线程。

刻度线格式化函数

这基本上表明,在将数据传递到 yaxistickformatter 之前,必须先使用一个函数来格式化数据。

我做了一些进一步的挖掘,发现这个线程给出了一个关于如何格式化所述函数的输出的想法。

如何格式化百分比语言环境字符串

因此,我尝试使用这两个工具创建一个函数,将我的 y 轴格式化为百分比。

这是我的垂直条形图组件文件

这是我的垂直条形图 html 文件

这是我的数据文件:

这是最终结果

y 轴刻度尚未格式化为百分比。我确信我很接近可能我可能需要将数据文件中的值传递到我概述的函数中,以便它可以被格式化并传递给图表。但是我不确定如何做到这一点。任何援助将不胜感激。

0 投票
0 回答
166 浏览

javascript - 饼图表示聚合值 - Angular 5

用于显示汇总值的推荐图表类型是什么?我猜条形图是最好的,但我可以使用圆环图吗?例如,我想显示今天有 30 人访问了我的网站。我可以用饼图或圆环图表示吗?我打算使用ngx-chartsng2-charts用于我的 Angular 5 应用程序。

0 投票
3 回答
4625 浏览

ngx-charts - 如何使用 Ngx-Charts customColor 功能

您如何将 customColor 属性用作函数?我正在寻找建立一个散点图并将所有具有负值的点标记为红色,将所有具有正值的点标记为绿色。我认为 customColor 功能可以让我这样做,但我只看到 customColor 作为对象而不是函数的示例。谢谢!

0 投票
1 回答
199 浏览

angular - 为什么我必须手动映射 SystemJS 配置文件中的所有 d3.js 依赖项?

我正在systemjs.config.js为当前位于Angular5.x的应用程序使用文件。

我安装npm install --save @swimlane/ngx-graphnpm install --save @swimlane/ngx-charts在应用程序中创建 DAG 图表。

我在应用程序中升级了一个组件,我的systemjs.config.js文件中有以下内容:

当我运行应用程序时,我core.umd.js在控制台中收到以下错误 错误

在解决所有问题之前,我是否必须执行这样的步骤404

0 投票
1 回答
4778 浏览

angular - 如何在自动更新 ngFor 数据结构的同时扩展 ngb-accordion 中的面板

我正在使用 ngFor 循环来使用 ngb-accordion 显示动态更新的数据。首次显示页面时,我所有的手风琴面板都处于活动状态;但是,当数据结构自动更新时,面板会崩溃。我希望他们保持打开状态并显示刷新的数据。dashboardDataMulti 是在组件中被更改的变量。我不确定是什么导致面板崩溃,但我可以肯定地说,它是在更新 dashboardDataMulti 变量时发生的。

更新:我能够在没有 ngx-charts 的情况下重现错误。这个问题似乎是由 ng-bootstrap 或 Angular 的问题引起的,其中动态数据在手风琴中重新填充(为简洁而编辑的代码)。

HTML 代码:

组件定时器:

添加了 plunker 来模仿我遇到的问题。

http://plnkr.co/edit/YJGXuoVGC9MeTJfpmPRb

如您所见, originalData 显示所有手风琴都按我的意愿展开;但是,当 originalData 数组动态更新时,所有的手风琴都崩溃了。如何更新此数据结构并保持面板打开以供查看?

0 投票
0 回答
918 浏览

angular - activeEntries 未在 ngx 条形图中突出显示

我在我的角度应用程序中使用 ngx-charts。

我正在使用垂直条形图来显示。我将名称作为日期,将值作为数字,即

VB图表组件是,

图表html是,

此处activeEntries更新为activeToday, 在组件中更新。

但在图表中,突出显示没有发生。如果我错了,请纠正我。

0 投票
2 回答
9783 浏览

ngx-charts - 如何根据时间线选择更改 ngx-charts-line-chart 中的 xAxisTickFormatting?

默认情况下,刻度根据时间线中的时间范围选择进行格式化。如果它跨天显示月份,如果它在一天内,它只显示时间。这很棒!

现在我想本地化这些刻度。我可以提供 xAxisTickFormatting 来完成这项工作,但我想根据时间范围选择进行格式化。“MMM DD”或“HH:MM”基于当前时间范围选择。

为此,我需要在时间范围选择事件上动态更改格式化函数。有这样的活动吗?或者有没有其他方法可以实现这一目标?

0 投票
0 回答
159 浏览

ngx-charts - ngx-charts:自动调整大小在 CSS 网格或 Flexbox 中无法正常工作

将一组图表放置在网格中时,行中的每个后续列都会生成一个大于其前面的图表的图表。

看起来,除非您明确指定硬编码大小,否则图表大小调整逻辑在网格或弹性框内无法正常工作。