nvd3折れ線グラフでshowMaxMin：trueが機能しない

Question

こんにちは、私のアプリケーションでNVD3折れ線グラフを実装しましたが、X軸に "January、February..till..December"完璧ですが、x軸のティックはそのままレンダリングされません。ここで私は描くことができ折れ線グラフのスナップショットは、私がやっていることであると、私は解決策を得るのを助ける、

JSPコードしてください：

<nvd3 options="options" data="dataForLineChart"></nvd3> 

コントローラ：私は

$scope.options = { 
     chart: { 
      type: 'lineChart', 
      showXAxis:true, 
      height: 300, 
      margin : { 
       top: 20, 
       right: 20, 
       bottom: 40, 
       left: 55 
      }, 
      x: function(d){ return d.x; }, 
      y: function(d){ return d.y; }, 
      useInteractiveGuideline: false, 
      dispatch: { 
       stateChange: function(e){ console.log("stateChange"); }, 
       changeState: function(e){ console.log("changeState"); }, 
       tooltipShow: function(e){ console.log("tooltipShow"); }, 
       tooltipHide: function(e){ console.log("tooltipHide"); } 
      }, 
      xAxis: { 
       axisLabel: 'Timeline(months)', 
       showMaxMin: false 
      }, 
      yAxis: { 
       axisLabel: 'Rate of aquisition', 
       tickFormat: function(d){ 
        return d3.format('')(d); 
       }, 
       axisLabelDistance: -8 
      }, 
      callback: function(chart){ 
       console.log("!!! lineChart callback !!!"); 
      }, 
      showLegend : false 

     } 
    } 

データ提供は次のとおりです。

$scope.dataForLineChart = 
    [{ 
     "key": "3", 
     "values":[{ 
     "x": "0", 
     "y": "57.0" 
     }, { 
     "x": "1", 
     "y": "67.0" 
     }, { 
     "x": "2", 
     "y": "40.0" 
     }, { 
     "x": "3", 
     "y": "20.0" 
     }, { 
     "x": "4", 
     "y": "10.0", 
     }, { 
     "x": "5", 
     "y": "40.0" 
     }, { 
     "x": "6", 
     "y": "57.0", 
     }, { 
     "x": "7", 
     "y": "44.0" 
     }, { 
     "x": "8", 
     "y": "23.0" 
     }, { 
     "x": "9", 
     "y": "75.0" 
     }, { 
     "x": "10", 
     "y": "22.0" 
     }, { 
     "x": "11", 
     "y": "12.0" 
     }] 
     }]; 

そして最後に、ここでは私のチャートは どのように見えるかですすべての12月は800に幅を作った後

をレンダリング取得されていないのはなぜ ：実際にそれが動作

Answer 1

は、それが

、単にグラフのサイズを変更し、参照、x軸上のすべての値を示しています

グラフのサイズを変更すると、軸のサイズが自動的に変更されるために発生します。幅を800に変更するだけです。表示されるラベルのために

DEMO

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

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.options = { 
 
    chart: { 
 
     type: 'lineChart', 
 
     showXAxis: true, 
 
     height: 300, 
 
     width:800, 
 
     margin: { 
 
     top: 20, 
 
     right: 20, 
 
     bottom: 40, 
 
     left: 55 
 
     }, 
 
     x: function(d) { 
 
     return d.x; 
 
     }, 
 
     y: function(d) { 
 
     return d.y; 
 
     }, 
 
     useInteractiveGuideline: false, 
 
     dispatch: { 
 
     stateChange: function(e) { 
 
      console.log("stateChange"); 
 
     }, 
 
     changeState: function(e) { 
 
      console.log("changeState"); 
 
     }, 
 
     tooltipShow: function(e) { 
 
      console.log("tooltipShow"); 
 
     }, 
 
     tooltipHide: function(e) { 
 
      console.log("tooltipHide"); 
 
     } 
 
     }, 
 
     
 
     xAxis: { 
 
     axisLabel: 'Timeline(months)', 
 
     showMaxMin: false, 
 
      }, 
 
     yAxis: { 
 
     axisLabel: 'Rate of aquisition', 
 
     tickFormat: function(d) { 
 
      return d3.format('')(d); 
 
     }, 
 
     axisLabelDistance: -8 
 
     }, 
 
     callback: function(chart) { 
 
     console.log("!!! lineChart callback !!!"); 
 
     }, 
 
     showLegend: false 
 

 
    } 
 
    } 
 

 
    $scope.dataForLineChart = [{ 
 
    "key": "3", 
 
    "values": [{ 
 
     "x": "0", 
 
     "y": "57.0" 
 
    }, { 
 
     "x": "1", 
 
     "y": "67.0" 
 
    }, { 
 
     "x": "2", 
 
     "y": "40.0" 
 
    }, { 
 
     "x": "3", 
 
     "y": "20.0" 
 
    }, { 
 
     "x": "4", 
 
     "y": "10.0", 
 
    }, { 
 
     "x": "5", 
 
     "y": "40.0" 
 
    }, { 
 
     "x": "6", 
 
     "y": "57.0", 
 
    }, { 
 
     "x": "7", 
 
     "y": "44.0" 
 
    }, { 
 
     "x": "8", 
 
     "y": "23.0" 
 
    }, { 
 
     "x": "9", 
 
     "y": "75.0" 
 
    }, { 
 
     "x": "10", 
 
     "y": "22.0" 
 
    }, { 
 
     "x": "11", 
 
     "y": "12.0" 
 
    }] 
 
    }]; 
 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>Angular-nvD3 Discrete Bar Chart</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <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://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 
    <body ng-controller="MainCtrl">  
 
    <nvd3 options="options" data="dataForLineChart"></nvd3>  
 
    <br><a href="http://krispo.github.io/angular-nvd3/" target="_blank" style="float: right;">See more</a> 
 
    </body> 
 

 
</html>

Answer 2

、海なしの幅は次の関数に、レンダリングするために必要であるが：

var chart = nv.models.multiBarChart() 
    .reduceXTicks(false) //If 'false', every single x-axis tick label will be rendered.