12

我开始使用 NVD3.js,我对这个工具可能的配置有点迷茫。我想配置许多项目,例如:

  • 为每个条显示 x 轴标签,目前我只有偶数显示: 我目前的图表
  • 我想在条上配置一个点击功能,它会重定向到一个以x轴为参数的页面,这个链接可以显示在标签上,但是在这种情况下我需要改变它,才能点击它.

这些是我的疑问,有人可以帮助我提供文档链接回答我的问题吗?

- 编辑 -

找到了如何在 x 轴上显示每个条形的标签:

在 nv.d3.js 中编辑函数nv.models.multiBarChart。在这一行:reduceXTicks = true中,将值设置为false

或者

只需将此行添加到您的 nv.addGraph函数中:

chart.reduceXTicks('false');
4

5 回答 5

11

NVD3 的开发似乎已经转移到具有可用文档的nvd3-community 分支

于 2014-12-30T23:59:03.493 回答
4

同意shabeer90。没有 NVD3 的文档(希望有)。D3.js 文档当然在很大程度上发挥作用......

于 2013-06-16T12:45:27.307 回答
3

感谢所有回复,但我已经自己完成了:

为每个条显示 x 轴标签:

添加chart.reduceXTicks('false');到您的nv.addGraph()函数中,如下所示:

nv.addGraph(function () {
    var chart = nv.models.multiBarChart();

    chart.reduceXTicks(false);

    return chart;
});

要添加事件以单击条形图,请在图表功能上使用:

d3.selectAll("rect.nv-bar").on("click", function (d) { // You can pass d to function to recover x ou y value of the bar
  // Whatever you want to do on click
});

如果有人有更好的解决方案,请在此处发表评论。

于 2013-06-17T13:41:58.243 回答
2

虽然不是理想的解决方案,但我发现通过使用下面的链接并修改右侧的参数直到获得我想要的结果更容易找到可用的配置选项。它是用于 nvd3 的 angularjs 包装器,但配置几乎相同,只是通过 JSON 代替。

https://krispo.github.io/angular-nvd3/#/historicalBarChart

于 2014-10-23T14:36:38.720 回答
1

这里有 API 的文档。除非有人提出一个简单地摄取 JSON 的抽象,否则这些工具都不会有用。没有人愿意编写该死的图表。

https://github.com/novus/nvd3/wiki/API-Documentation

于 2014-10-20T02:11:57.247 回答