NVD3折线图缺少X轴标记

问题描述

我使用NVD3在此处显示折线图：

但是似乎NVD3自动隐藏XAxis上的一些tickLabels，即2-3Oct和27-28Oct（除了第一个和最后一个tick）。我知道这是一个自动减少，因为当我增加图表的宽度，蜱开始显示。但是我发现这种减少行为很奇怪，而且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; 
}）
}）
  pre> 
 
 
但它没有工作。任何人都有任何想法如何控制这个？
 
 
 
解决方案
减少行为是有效的，因为 showMaxMin 设置为true默认。添加 .showMaxMin（false）可修复问题：
  chart.xAxis .axisLabel（XAxisLabel）
 .showMaxMin（false）
 .tickValues（tickvalues）
 .tickFormat（function（d）{
 return tickformat [d]; 
}）
; 
  
 
I am using NVD3 to display line chart here: http://jsbin.com/xodaxafiti/2/edit?js,output
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?
 解决方案 
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轴标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！