如何整合图表和 table 并使它们动态化？

Question

我有两个 table，一个显示销售人员每年的销售历史记录，另一个 table 显示以月为单位的销售历史记录。如下图所示：

我需要创建一个复合图表（我相信它是一个复合图表，因为它会有超过 01 行），它正好代表月份 table。

例如，当我点击卖家 Miguel 创建图表后，图表将显示该卖家的历史记录。

例如，如果我单击图表的第 03 个月，table 卖家将仅显示第 3 个月的销售额。

我不知道该怎么做，我设法创建了一个显示与月份相同数据的复合图表 table，但是，我无法将我的图表与 tables.

你能告诉我怎么做吗？

我把我做的代码放在JSFiddle里，这里是链接：

Sales/Month Table: https://jsfiddle.net/bernalvinicius/ejxcfpvz/15/

月线图： https://jsfiddle.net/bernalvinicius/kanm158j/17/

提前致谢。

Answer 1

只需将所有代码放在同一个文件中，组合交叉过滤器实例，并将所有图表放在同一个图表组中（默认设置），它应该可以正常工作。

图表组是每个图表构造函数的第二个参数。如果未指定，则图表进入默认图表组。

当图表组中的任何图表被过滤时，它会通知该图表组中的所有其他图表重新绘制，并且它们将从各自的交叉过滤器组中提取新数据。（抱歉命名，dc.js 图表组与交叉过滤器组无关。）

为了合并您的代码，我将两个交叉过滤器实例重命名为 cf。然后我将您正在生成的新字段添加到现有行中，而不是映射数据：

  data.forEach(d =>
    Object.assign(d,  {
      mes: d.Month,
      atual: d.Vendas_Ano,
      passado: d.Vendas_Ant
    })
  );

在您的 table fiddle 中，您使用 data.forEach() 为数据中的每一行初始化 table 这是没有必要的。这就是为什么加载这么慢的原因。

除此之外，两个 fiddle 具有相同的一般结构，所以我只是将代码从 table fiddle 复制并粘贴到复合 fiddle， HTML、JS 和 CSS。

在 JS 中，我确保在 d3.json() 回调的外部和内部放置与以前相同的行。

看起来有效？

https://jsfiddle.net/gordonwoodhull/0q1y5ftr/15/

如何整合图表和 table 并使它们动态化？

How to integrate chart and table and make them dynamic?

d3.js

crossfilter

dc.js