删除nvd3中刻度线之间的空格

时间：2016-03-15 13:25:43

标签： javascript angularjs nvd3.js angularjs-nvd3-directives

问题NVD3 Line chart tics wrongly aligned to grid when using datetype on xAxis：

简而言之：

  

我现在遇到的问题是我的数据与Axis

错误对齐

问题

当我一天（或更多）没有数据时，图表会“保存”缺失日期的地方。我想避免它。

enter image description here

我知道我可以使用0添加丢失的一天的数据，但我的问题是如果没有它我是否可以这样做。 

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
  $scope.options = {
    chart: {
      type: 'lineChart',
      height: 500,
      useInteractiveGuideline: true,
      xAxis: {
        tickFormat: function(d) {
          return d3.time.format('%H %d/%m')(new Date(d));
        },
        rotateLabels: -45,
        tickValues: function(values) {
          var a =  _.map(values[0].values, function(v) {
            return new Date(v.x);
          });
          return a;
        }
      }
    }
  };


  $scope.data = [
    // date, series1, series2, series
    [1446418800000, 2, 2, 1],
    [1446505200000, 0, 0, 0],
    [1446591600000, 14, 12, 2],
    [1446678000000, 65, 38, 27],
    [1446764400000, 11, 6, 5],
    // [1446850800000, 0, 0, 0],
    // [1446937200000, 0, 0, 0],
    [1447023600000, 6, 4, 2],
    [1447110000000, 0, 0, 0],
    [1447196400000, 0, 0, 0],
    [1447282800000, 0, 0, 0],
    [1447369200000, 12, 2, 10],
    [1447455600000, 0, 0, 0],
    [1447542000000, 0, 0, 0],
    [1447628400000, 0, 0, 0],
    [1447714800000, 1, 0, 1]
  ];

  var graphData = function(data, labels, colors) {
    var series = [];

    // first(0) value is date
    for (var i = 1; i < data[0].length; i++) {
      var values = [];
      for (var j = 0; j < data.length; j++) {
        values.push({
          x: data[j][0], // x is date
          y: data[j][i] // y is value
        });
      }
      series.push({
        values: values, // graph data
        key: labels[i - 1], // the label
        color: colors[i - 1] // color of series
      });
    }
    return series;
  };

  $scope.graphData = graphData($scope.data, ['One', 'Two', 'Three'], ['#6C6C6C', '#2ca02c', '#E43211']);
});
<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>Angular-nvD3 Line Chart</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>    
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="https://cdn.rawgit.com/novus/nvd3/master/build/nv.d3.js"></script>
    <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.3/dist/angular-nvd3.js"></script>
    <script data-require="lodash.js@1.3.1" data-semver="1.3.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.min.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    <nvd3 options="options" data="graphData" class="with-3d-shadow with-transitions"></nvd3>
  </body>
</html>

http://plnkr.co/edit/42uzlu4AjnHJpI7o41l3?p=preview

2 个答案:

答案 0 :(得分：1)

感谢@krispo上的github，以下是答案：

＆＃13;
＆＃13; 
var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
  $scope.options = {
    chart: {
      type: 'lineChart',
      height: 500,
      useInteractiveGuideline: true,
      x: function(d){ return d.i},
      xAxis: {
        tickFormat: function(d) {
          var data = $scope.graphData[0].values[d].x;
          return d3.time.format('%H %d/%m')(new Date(data));
        },
        rotateLabels: -45,
        tickValues: function(values) {
          var a =  _.map(values[0].values, function(v,i) {
            return i
          });
          return a;
        },
        showMaxMin: false
      }
    }
  };


  $scope.data = [
    // date, series1, series2, series
    [1446418800000, 2, 2, 1],
    [1446505200000, 0, 0, 0],
    [1446591600000, 14, 12, 2],
    [1446678000000, 65, 38, 27],
    [1446764400000, 11, 6, 5],
    // [1446850800000, 0, 0, 0],
    // [1446937200000, 0, 0, 0],
    [1447023600000, 6, 4, 2],
    [1447110000000, 0, 0, 0],
    [1447196400000, 0, 0, 0],
    [1447282800000, 0, 0, 0],
    [1447369200000, 12, 2, 10],
    [1447455600000, 0, 0, 0],
    [1447542000000, 0, 0, 0],
    [1447628400000, 0, 0, 0],
    [1447714800000, 1, 0, 1]
  ];

  var graphData = function(data, labels, colors) {
    var series = [];

    // first(0) value is date
    for (var i = 1; i < data[0].length; i++) {
      var values = [];
      for (var j = 0; j < data.length; j++) {
        values.push({
          i: j,
          x: data[j][0], // x is date
          y: data[j][i] // y is value
        });
      }
      series.push({
        values: values, // graph data
        key: labels[i - 1], // the label
        color: colors[i - 1] // color of series
      });
    }
    return series;
  };

  $scope.graphData = graphData($scope.data, ['One', 'Two', 'Three'], ['#6C6C6C', '#2ca02c', '#E43211']);
  console.log($scope.graphData);

});
＆＃13; 
<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>Angular-nvD3 Line Chart</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>    

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script> -->
    <script src="https://cdn.rawgit.com/novus/nvd3/master/build/nv.d3.js"></script>
    <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.3/dist/angular-nvd3.js"></script>
    <script data-require="lodash.js@1.3.1" data-semver="1.3.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.min.js"></script>

    <!--<script src="app.js"></script>-->
  </head>
  <body ng-controller="MainCtrl">
    <nvd3 options="options" data="graphData" class="with-3d-shadow with-transitions"></nvd3>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

plnkr

答案 1 :(得分：0)

恐怕我在这里没有完整的答案，但既然你按照上一个问题的答案，我将描述其后果。

出现问题是因为您自己提供tickValues。如果删除自定义函数，轴将使用它的默认函数并生成一个（让它调用它）均匀分布的刻度： default function ticks

因此，您应该修复的地方是tickValues功能。在我看来，为它添加逻辑，所以它会产生均匀分布的刻度将是非常hacky，但并非不可能（我可以想到几种方法来做）。但仍然（imo）在这种情况下，最好在服务器端进行。

祝你好运！

相关问题
最新问题