Question

我有一个简单的折线图，Y值从0到100。我想扭转Y范围而不是100-0。图形代码如下：

    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;
    });

Answer 1

您需要明确设置图表的域。在D3中，“域”是数据的预期范围。如果您未自行设置，则计算为[minValue, maxValue]。但你可以明确地将它设置为任何东西，即使第一个数字大于第二个数字。

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

Answer 2

如果您碰巧使用Angular NVD3包装器，设置自定义消息的方法是通过图表选项，只需：

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

nvd3设置从大到小的规模

2 个答案: