angular - D3 NGX 折线图在不应该有高度时出现

Question

我的ngx-charts折线图有一个奇怪的问题。

如果你看一下下面的 GIF，你会看到 2 个折线图。第一个有bug，第二个没问题。

第一个图表的值总计为零。但图表似乎在每个 x 轴点都有一个值。它不应该有那个高度，它应该像第二张图表一样平放在图表的底部。

创建第一个图表的值（列表中的每个项目的值为0）：

[{"value":0,"date":"Mar 18, 12:00 AM"},{"value":0,"date":"Mar 18, 1:00 AM"},{"value":0,"date":"Mar 18, 2:00 AM"},{"value":0,"date":"Mar 18, 3:00 AM"},{"value":0,"date":"Mar 18, 4:00 AM"},{"value":0,"date":"Mar 18, 5:00 AM"},{"value":0,"date":"Mar 18, 6:00 AM"},{"value":0,"date":"Mar 18, 7:00 AM"},{"value":0,"date":"Mar 18, 8:00 AM"},{"value":0,"date":"Mar 18, 9:00 AM"},{"value":0,"date":"Mar 18, 10:00 AM"},{"value":0,"date":"Mar 18, 11:00 AM"},{"value":0,"date":"Mar 18, 12:00 PM"},{"value":0,"date":"Mar 18, 1:00 PM"},{"value":0,"date":"Mar 18, 2:00 PM"},{"value":0,"date":"Mar 18, 3:00 PM"},{"value":0,"date":"Mar 18, 4:00 PM"},{"value":0,"date":"Mar 18, 5:00 PM"},{"value":0,"date":"Mar 18, 6:00 PM"},{"value":0,"date":"Mar 18, 7:00 PM"},{"value":0,"date":"Mar 18, 8:00 PM"},{"value":0,"date":"Mar 18, 9:00 PM"},{"value":0,"date":"Mar 18, 10:00 PM"},{"value":0,"date":"Mar 18, 11:00 PM"}]

创建第二个图表的值（列表中除 2 个项目外的每个项目的值为0。其他 2 个项目是使图表线向上移动的原因）：

[{"value":0,"date":"Feb 16"},{"value":0,"date":"Feb 17"},{"value":0,"date":"Feb 18"},{"value":0,"date":"Feb 19"},{"value":0,"date":"Feb 20"},{"value":0,"date":"Feb 21"},{"value":0,"date":"Feb 22"},{"value":0,"date":"Feb 23"},{"value":0,"date":"Feb 24"},{"value":0,"date":"Feb 25"},{"value":0,"date":"Feb 26"},{"value":0,"date":"Feb 27"},{"value":0,"date":"Feb 28"},{"value":0,"date":"Mar 1"},{"value":0,"date":"Mar 2"},{"value":0,"date":"Mar 3"},{"value":0,"date":"Mar 4"},{"value":0,"date":"Mar 5"},{"value":0,"date":"Mar 6"},{"value":0,"date":"Mar 7"},{"value":0,"date":"Mar 8"},{"value":0,"date":"Mar 9"},{"value":0,"date":"Mar 10"},{"value":0,"date":"Mar 11"},{"value":0,"date":"Mar 12"},{"value":0,"date":"Mar 13"},{"value":0,"date":"Mar 14"},{"value":0,"date":"Mar 15"},{"value":0,"date":"Mar 16"},{"value":200,"date":"Mar 17"},{"value":200,"date":"Mar 18"}]

我查看了整个ngx-charts代码库，当我尝试修改各种设置时没有找到答案。

更新：

这是原始 SVG HTML 的要点。

标签： angulard3.jsngx-charts

Answer 1

问题可能是，因为您的 y-min 等于您的 y-max ( 0)，如果您yScaleMax在所有数据都位于 时提供 a 0，它就可以工作。