In nvd3 Liniendiagramm, showMaxMin: true funktioniert nicht

Question

Hallo Jungs Ich habe NVD3 Liniendiagramm in meiner Anwendung implementiert, ich habe Ticks wie "Januar, Februar ... bis ... Dezember" auf der X-Achse, Chart wird gezogen perfekt, aber die X-Achsen-Ticks werden nicht so gerendert wie sie sind. Bitte helfen Sie mir die Lösung zu bekommen, ist hier, was ich und die Momentaufnahme des Liniendiagramm getan haben könnte ich zeichne,

JSP-Code:

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

Controller:

$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 

     } 
    } 

Daten Ich bin Bereitstellung ist:

$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" 
     }] 
     }]; 

Und schließlich ist hier, wie mein Diagramm wie aussieht Warum die alle 12 Monate sind nicht

Nachdem Breite bis 800 gemacht zu werden:

Answer 1

Eigentlich funktioniert es sie alle Werte auf der x-Achse zeigt, die Größe nur das Diagramm und sehen,

es passiert, weil es automatisch die Größe der Achsen ändert, wenn Sie die Größe des Diagramms ändern. Ändere einfach die Breite auf 800, du könntest sehen.

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

Damit die Etiketten angezeigt werden, obwohl die Breite ohne Meer notwendig ist, für die Darstellung auf der folgenden Funktion:

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