DC.js模拟点击图表并触发过滤器

dc.js simulate click on chart and trigger filter on

本文关键字:过滤器 js 模拟 DC      更新时间:2023-09-26

我想做什么:

我有一个条形图,其中x轴代表时间。可以通过用鼠标选择一段时间来选择一段时间,所有图表都会根据选择正确调整。

但是,有时很难从确切日期转到确切日期,我想添加一个日历,可以在其中选择这些日期。

理想情况下,在日历上选择日期应与在条形图上使用鼠标选择时间段具有相同的效果。

尝试过但不喜欢:

我尝试创建第二个时间维度,并让日历选择该维度。但是,这会使条形图最小值和最大值调整为该选择 条形图不涵盖时间维度的完整维度,而仅涵盖日历上的选定时间段。这就是我想避免的。

如何在图表本身上精确模拟选择?

多谢。

编辑:

我试图理解对评论提出的建议。 让我向您展示一些代码。

我有一个条形图:

var moveChart    = dc.barChart("#move-chart","chart2"); 

这是人们刷上来执行时间过滤器的那个。

moveChart
.width(700)
...
.dimension(timeDim)
.group(foo) 

现在,假设我在控制台上做:

timeDim.filterRange([minTime,maxTime]);
dc.renderAll("chart2");

这使得其他图表反映所选内容,但不反映移动图表。

我也试图实施戈登的评论,但我不明白。在控制台中,我可以看到moveChart.filters。没有实现任何像 RangedFilter 或 TwoDimensionalFilter 这样的过滤器,所以我不确定如何在画笔上执行过滤器功能。

谢谢。

图表不会在其自身的维度上观察过滤器,所以我认为你真的想要画笔选项。

filter = dc.filters.RangedFilter(filter[0], filter[1]);
moveChart.filter(filter);

远程过滤器文档

您只需要在图表上设置筛选器

;图表将在维度上设置筛选器。