【问题标题】:How to build stacked bar chart overlapping with d3js如何构建与 d3js 重叠的堆积条形图
【发布时间】:2018-07-31 02:27:29
【问题描述】:

我打算使用 d3js 构建一个堆叠条形图,显示已发送、打开和单击的电子邮件数量,使用普通堆叠条,每列将有 3 个块,stack 彼此。

例如:发送的电子邮件总数为 100,打开为 80,点击为 30,然后有 3 个块,每个块的值分别为 100、80 和 30。但它并没有准确显示统计数据,所以我想构建一个重叠的堆叠条,例如

这是一个例子,但我没有找到任何 d3 图表或其他支持它的东西,我想我们需要自定义它们。

【问题讨论】:

  • 这是否意味着您希望rects 按值排序,也许第二天Sent 的计数最低?还是要分组条形图bl.ocks.org/mbostock/3887051
  • @rioV8,实际上,Sent 总是最高值,然后到Opened 和最低值是Clicked 正常逻辑。正好是group bar,但是我们把它们分组到stack bar中,因为时间范围比较长,所以我们想节省空间
  • 然后只需将普通条形图与分组条形图“合并”,仅使用一个 x 刻度。像分组一样渲染,但使用 x0 而不是 x1。

标签: d3.js charts nvd3.js stacked-chart


【解决方案1】:

我已经用画笔创建了堆栈条形图,我认为它对您有帮助,您需要传递数据,还需要指定 x_label_KEY 是要在 x 轴上显示的。

我传递了不同的数据集,但您可以传递您的数据进行检查。例如,您可以从这里下载 - https://github.com/Umesh-Markande/D3-Graph-With-Brush/blob/master/stackBarWithBrush.html

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-07
    • 2019-04-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多