NVD3 折线图 X 轴刻度丢失 [英] NVD3 Line Chart X Axis Ticks Are Missing
问题描述
我使用 NVD3 在此处显示折线图:http://jsbin.com/xodaxafiti/2/edit?js,output
I am using NVD3 to display line chart here: http://jsbin.com/xodaxafiti/2/edit?js,output
但似乎 NVD3 会自动隐藏 XAxis 上的一些刻度标签,但仅隐藏边缘附近的刻度,即 2-3Oct 和 27-28Oct(第一个和最后一个刻度除外).我知道这是一个自动缩小,因为当我增加图表的宽度时,刻度开始出现.但是我发现这种减少行为很奇怪,并且 lineChart 没有像 multiBarChart 那样的 reduceXTicks 选项.
But it seems like NVD3 auto-hide some tickLabels on XAxis, but only those ticks near the edge, i.e. 2-3Oct and 27-28Oct (except the first and last tick). I know that this is an auto-reduce because when I increase the width of chart, the ticks start to show up. However I find that this reducing behaviour weird, and the lineChart does not have reduceXTicks option like multiBarChart.
我希望能够像这个那样自己控制减少行为:>
I want to be able to control the reducing behaviour myself like this:
var chart = nv.models.lineChart()
.useInteractiveGuideline(true)
.margin({left: 80,top: 20,bottom: 120,right: 20});
chart.xAxis.ticks(function() {
return data[0].map(chart.x()).filter(function(d,i) {
i % Math.ceil(data[0].values.length / (availableWidth / 100)) === 0;
})
})
但是没有用.有人知道如何控制吗?
But it didn't work. Anyone has any idea how to control this?
推荐答案
减少行为有效,因为 showMaxMin
默认设置为 true.添加 .showMaxMin(false)
修复了问题:
The reducing behavior works because the showMaxMin
set to true by default. Adding .showMaxMin(false)
fixes the problem:
chart.xAxis.axisLabel("XAxisLabel")
.showMaxMin(false)
.tickValues(tickvalues)
.tickFormat(function (d) {
return tickformat[d];
})
;
这篇关于NVD3 折线图 X 轴刻度丢失的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!