2014-01-15 56 views
2

我在Y值从0-100跨越一个简单的线图。我想扭转Y的范围,而不是100-0。图表代码如下:nvd3设定的比例从大到小

nv.addGraph(function() { 
     var values = that.getGraphValues(); 
     console.log(values); 
     var chart = nv.models.lineChart() 
      .forceY([100, 1]); 

     chart.xAxis 
      .axisLabel('Date') 
      .tickFormat(function(d) { return d3.time.format('%b %d')(new Date(d)); }); 

     chart.yAxis 
      .axisLabel('Ranking') 
      .tickFormat(d3.format(',r')); 

     d3.select('#chart svg') 
      .datum(values) 
     .transition().duration(500) 
      .call(chart); 

     nv.utils.windowResize(function() { d3.select('#chart svg').call(chart) }); 

     return chart; 
    }); 

回答

3

您需要明确设置图形的域。在D3中,术语“域”是数据的预期范围。如果你不自己设置,它的计算公式为[minValue, maxValue]。但是您可以明确地将其设置为任何内容,即使第一个数字大于第二个数字。

var chart = nv.models.lineChart() 
      .yDomain([100,0]); 
+0

附: '.forceX([数字])'和'forceY([数字])'强制域名*包含*这些数字,可用于扩展域,但它们的顺序被忽略 - 程序只计算最大值以及将这些数字添加到数据数组的末尾后的最小值。 – AmeliaBR

+0

根据我的理解,forceX([数字])仍然不会颠倒顺序。试过它,但是它仍然没有扭转顺序。 –

+0

正是@AceDimasuhid。我刚才提到它试图解释为什么这种方法*不工作。直接设置y域应该可以做到。 – AmeliaBR

1

如果你碰巧使用了Angular NVD3包装,设置自定义消息的方式是通过图表选项,简单地说:

$scope.options = { 
    chart: { 
    ... 
    yDomain: [100, 1], 
    ... 
    } 
};