代码之家 › 专栏 › 技术社区 › NicolasR

NVD3/D3.JS一个条形图位于另一个条形图之上

nvd3.js d3.js

NicolasR · 技术社区 · 7 年前

我有两个系列,最大值和平均值,每个系列都包含一个月内所有天数的值。在我们的桌面软件中,我们使用条形图显示这些数据,其中平均序列叠加在最大序列上。由于平均值不能大于最大值,隐藏条没有问题。

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

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

如果不是直接在nvd3中,可以通过访问底层的d3对象来完成吗?

1 回复 | 直到 7 年前

sparta93 7 年前

这是一种方法。您可以使用 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>

推荐文章

Eddie Worthington · D3.js指针相对于轴域的坐标

2 年前

b404 · 如何在d3 react typescript应用程序中正确设置“path”元素中属性“d”的类型

3 年前

user6456564 · 双条形图创建

7 年前

MetalCat · 在d3中,如何在地图上的鼠标上方显示多个值?

7 年前

atdyer · 使用svg变换更新位置时,力模拟会出现抖动

7 年前

MTT · 最适合散点图的回归

7 年前

Cyley Simon · 以chile/name格式将Csv转换为json

7 年前

Himani · 线图和面积图之间的颜色不同

7 年前

Francis Katalinic · d3。使用d3通过ajax响应实现JSJSON。json()

7 年前

user9646441 · 为什么这个svg和数组会在angular中多次启动?

7 年前