В линейной диаграмме nvd3 showMaxMin: true не работает

Question

Привет, ребята, я применил линейную диаграмму NVD3 в своем приложении, у меня есть отметки типа «январь, февраль .. до декабря» по оси X, диаграмма рисуется отлично, но галочки оси 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

На самом деле он работает, он показывает все значения на оси х, просто изменить размер диаграммы и посмотреть,

Это происходит потому, что при изменении размера диаграммы оно автоматически изменяет размеры осей. просто измените ширину на 800, вы можете видеть.

ДЕМО

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.