如何在nvd3中显示所有x轴值

时间:2016-06-04 08:42:28

标签: javascript d3.js nvd3.js

我有一张nvd3的折线图

这是我的代码:

var categories = color.domain().map(function(name) {
    return {
      key: name,
      values: data.map(function(d) {
        return {
          seme: d.Semester, 
          stat: d[name],
           area: true 
          };
      })
    };
  }); // end of categories

    nv.addGraph(function() {
    var chart = nv.models.lineChart()
    .x(function(d) { return parseFloat(d.seme); })
      .y(function(d) { return parseFloat(d.stat); }) 
      .color(['#ffbb78', '#ff7f0e', '#aec7e8', '#1f77b4'])
                .margin({left: 100})
                .transitionDuration(350)
                .showLegend(true)
                .showYAxis(true) 
                .showXAxis(true)
                 .width(width).height(height);
   chart.isArea(true);

这是我的图表:

enter image description here

我想要显示所有学期的值,那么如何强制x轴显示学期的所有值?

我试过这个

chart.xAxis.axisLabel("Semester")
    .showMaxMin(false)    
    .tickValues(function(d) { return parseFloat(d.seme); })
    .tickFormat(d3.format(',f'));

在这里我得到了:

enter image description here

1 个答案:

答案 0 :(得分:1)

有时只有 showMaxMin:false 不起作用。连同那个指定

xAxis:{         蜱:值 } 其中value是要显示的数据点的数量。 我必须显示10个数据点,所以下面对我有效。

xAxis:{ticks:10,showMaxMin:false}