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一个条形图在另一个上面

1 个答案: