积有重叠序列的js堆积区域

Question

我有一些要重叠的日期的数据，希望在堆叠的面积图中可视化。因此，想象一下具有以下数据的7天x三个系列的x轴：

[5, 3, 3, undefined, undefined, undefined, undefined],
[undefined, 2, 4, 2, 2, undefined, undefined],
[undefined, undefined, undefined, undefined, 3, 3, 5],

数字表示在不同项目上取得的进展，并且每个生命周期都很短，因此通常第一个数字是项目开始的日期。意味着在第一天，只有第一个项目处于活动状态。

但是，将鼠标悬停在图形的任何点上都会显示所有项目（已完成但尚未开始），进度为“ 0”。在这个小例子中，这并不重要，但是如果我将时间范围扩展到一个月或一年，就会变得很拥挤。

此外，所有0个项目仍被绘制，在图形上方留下了一个难看的锯齿状线。请注意最右边的一行：它包含的信息表明，自1月19日开始的项目没有任何进展。

我认为我想做的是不绘制任何值为0 / undefined的东西。那可能吗？也许有更好的方式可视化此类数据？

这是一个例子：

JsFiddle 1

更新：

将hoverinfo设置为'text'并将hovertext设置为数组可以解决标记问题。如果hovertext是一个字符串，它将出现在每一个点，如果是数组，则第一项只会出现在第一个节点上，等等。

参见此处：JsFiddle 2