为什么我的折线图没有绘制我的所有数据？答案

【问题标题】：Why is my line chart not plotting all of my data?为什么我的折线图没有绘制我的所有数据？
【发布时间】：2018-04-22 20:00:10
【问题描述】：

我正在尝试创建一个包含 {x: someX, y: someY} 点的折线图。但是，它并没有涵盖我的所有观点，并且在 y 为 783 时达到最大值。

这是正在发生的事情的图片：

底部的航空公司也应该有覆盖它们的线，但我的折线图在 {x: 21, y: 783} 停止了这条线。

我怎样才能让这个折线图按我的意图覆盖其他坐标？

这是我的 linechart.component.js：

app.component('linechart', {
  templateUrl: 'views/linechart.template.html',
  controller: function($scope, ClaimService) {
    $scope.data = [];
    $scope.getData = (function() {

      ClaimService.getData().then(function(data) {

        var coordinates = [];

        var coords;
        for (var i = 0; i < data.length; i++) {

          coords = {
            x: i,
            y: data[i].monthlyLoss,
            label: data[i].key
          }

          coordinates.push(coords);

        }

        $scope.data = [
          {
            key: "Refer to X axis for airline names",
            values: coordinates,
            color: "blue"
          }
        ]

      })
    })();

    $scope.options = {
      chart: {
        type: 'lineChart',
        height: 500,
        width: 5000,
        x: function(d) {

          return d.x;

        },
        y: function(d) {
          return d.y

        },

        color: d3.scale.category10().range(),
        duration: 300,
        useInteractiveGuideline: true,
        clipVoronoi: false,

        xAxis: {
          axisLabel: "Monthly loss",
          tickFormat: function(d) {
            console.log(d)
            var label = $scope.data[0].values[d].label;
            return label;

          }
        },

        yAxis: {
          axisLabel: 'Y Axis',

          axisLabelDistance: 0
        },
        yDomain: [0, 40000]
      }
    };
  }
})

如果你想运行它，这里是 git repo。

【问题讨论】：

标签： angularjs charts angular-nvd3

【解决方案1】：

我发现了问题。在 783 的 y 坐标之后的所有数字都以千为单位，并且从 API 以带逗号的字符串形式传入。所以我不得不从每个数字中删除“，”。然后折线图的其余部分就可以绘制了。

【讨论】：