2014-01-15 55 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], 
    ... 
    } 
};