NVD3图表“日期类型”更改最大和最小位置y轴

时间:2017-05-25 15:22:03

标签: javascript jquery d3.js nvd3.js angular-nvd3

我需要更改y轴位置,即最小位置位于顶部,最大位置位于底部。所以nvd3图表将向下移动到最新值

我需要的一切都在这个链接中。

http://jsfiddle.net/8fh8qLs0/8/

在此示例中图表上升,因为最大值在顶部如何更改所以最大值在底部,

这里是代码

  angular.module('myApp', ['nvd3'])
  .controller('myCtrl', function($scope) {
    $scope.options = {
      chart: {
        type: 'lineChart',
        height: 450,
        margin: {
          top: 20,
          right: 20,
          bottom: 40,
          left: 60
        },
        // x: function(d){ return new Date(d.x).toISOString(); },
        x: function(d) {
          return d.x;
        }, //
        //xScale: d3.time.scale,
        y: function(d) {
          return d.y;
        },
        useInteractiveGuideline: true,
        transitionDuration: 1,
        isArea: false,
        useInteractiveGuideline: true,
        xAxis: {
          tickFormat: function(d) {
            return d3.format('.02f')(d);
          },
        },
        yAxis: {
          axisLabel: 'Time (ms)',
          tickFormat: function(d) {
            return d3.time.format('%H:%M:%S')(new Date(d));
          }
        },
        callback: function(chart) {
          console.log("!!! lineChart callback !!!");
          console.log(chart.yAxis.scale().domain());
        },
        interactiveLayer: {
          tooltip: {
            gravity: 's',
            classes: 'gravity-s'
          }
        },
        x2Axis: {
          showMaxMin: false,

        },
        y2Axis: {
          showMaxMin: false,
          tickFormat: function(d) {
            var date = new Date(new Date().setDate(new Date().getDate() + d));
            return d3.time.format('%b %d')(date);
          }
        },
        legend: {
          margin: {
            top: 8,
            right: 0,
            bottom: 32,
            left: 0
          },
          rightAlign: true
        }
      }
    };

    $scope.data = [{
      values: [],
      key: 'Random Walk'
    }];

    $scope.run = true;

    var x = 0;
    setInterval(function() {
      if (!$scope.run) return;
      $scope.data[0].values.push({
        x: Math.random(),
        y: Date.now(), //* (Math.random() > 0.95) ? 10: 1
      });

      if ($scope.data[0].values.length > 70) {
        $scope.data[0].values.shift();
      }
      x++;
      $scope.$apply();
      //chart.update();
    }, 1000);
  });

提前致谢。

0 个答案:

没有答案