nvd3/d3.js 一个条形图在另一个之上

Question

我有两个系列，最大值和平均值，每个系列都包含一个月中所有天数的值。在我们的桌面软件中，我们过去常常在条形图中显示这些，其中平均系列覆盖在最大系列上。由于平均值永远不会大于最大值，因此隐藏柱没有问题。

在 NVD3 中，我只找到了对条形图进行分组或堆叠的选项。分组占用太多空间。堆叠在另一侧会显示错误的上部条形值。只有当两个条都从底部轴开始时，才能从 y 轴读取它们的实际值。

这可以在 NVD3 中以任何方式实现吗？

如果不是直接在 NVD3 中，是否可以通过访问底层 d3 对象来完成？

Answer 1

这是一种方法。您可以使用 multibarChart 并仅启用堆叠选项并禁用默认显示的控件。

在我个人看来，我建议使用原生 D3，具体取决于您要实现的目标。

var chart = nv.models.multiBarChart().stacked(true).showControls(false);
d3.select('#chart svg').datum([
  {
    key: "Avg",
    color: "#51A351",
    values:
    [      
      { x : "Jan 1", y : 40 },
      { x : "Jan 2", y : 30 },
    ]
  },
  {
    key: "Max",
    color: "#BD362F",
    values:
    [      
      { x : "Jan 1", y : 12 },
      { x : "Jan 2", y : 8 },
    ]
  }
]).transition().duration(500).call(chart);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css">

<div id="chart" style="height: 200px;"><svg></svg></div>

nvd3/d3.js 一个条形图在另一个之上

nvd3/d3.js one bar chart on top of another

d3.js

nvd3.js