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

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

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

1 个答案: