Question

大家好，我已经在我的应用程序中实现了NVD3折线图，我有一些类似于＆＃34; 1月，2月......还有... 12月＆＃34;在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

实际上它有效，它显示x轴上的所有值，只需调整图表大小并查看，

发生这种情况是因为它在您调整图表大小时会自动调整轴的大小。只需将宽度更改为800即可。

<强>样本

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 2

为了显示标签，虽然渲染时需要没有海的宽度，但需要以下功能：

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

在nvd3折线图中，showMaxMin：true不起作用

2 个答案: