我开始使用NVD3.js,我对这个工具可能的配置有点迷茫。 我想配置许多项目,如:
这些是我的疑惑,有人可以通过文档链接或我的问题的答案帮助我吗?
- 编辑 -
找到如何在x轴上显示每个条形的标签:
在nv.d3.js中编辑函数nv.models.multiBarChart
。在此行中reduceXTicks = true
,将值设置为false
。
或
只需将此行添加到nv.addGraph
函数中:
chart.reduceXTicks('false');
答案 0 :(得分:11)
NVD3的开发似乎已转移到nvd3-community fork,documentation可用。
答案 1 :(得分:4)
同意shabeer90。 NVD3没有文档(希望有)。 D3.js文档当然主要在起作用......
答案 2 :(得分: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
});
如果有人有更好的解决方案,请在此处发表评论。
答案 3 :(得分:2)
虽然不是理想的解决方案,但我发现通过使用下面的链接找到可用的配置选项并在右边修改参数直到得到我想要的结果更容易。它适用于nvd3的angularjs包装器,但配置几乎相同,只能通过JSON。
答案 4 :(得分:1)
这里有API的文档。在有人提供简单摄取JSON的抽象之前,这些工具都不会有用。没有人想编写一个该死的图表。