yon*_*hen 6 javascript linechart d3.js nvd3.js
我在这里使用NVD3显示折线图:http://jsbin.com/xodaxafiti/2/edit?js,output
但似乎NVD3在XAxis上自动隐藏了一些tickLabel,但只有那些靠近边缘的刻度线,即2-3Oct和27-28Oct(除了第一个和最后一个刻度).我知道这是一个自动缩减,因为当我增加图表的宽度时,刻度开始显示.但是我发现这种减少行为很奇怪,而且lineChart没有像multiBarChart这样的reduceXTicks选项.
我希望能够像这样自己控制减少行为:
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;
})
})
Run Code Online (Sandbox Code Playgroud)
但它没有用.任何人都知道如何控制这个?
Osm*_*nov 16
还原行为有效,因为showMaxMin
默认情况下设置为true.添加.showMaxMin(false)
修复问题:
chart.xAxis.axisLabel("XAxisLabel")
.showMaxMin(false)
.tickValues(tickvalues)
.tickFormat(function (d) {
return tickformat[d];
})
;
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
11305 次 |
最近记录: |