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

Question

我正在尝试创建一个包含 {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 如果你想运行它。

Answer 1

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

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

Why is my line chart not plotting all of my data?

charts

angularjs

angular-nvd3