javascript - ChartJS Linechart xAxes 处的奇怪线

Question

我正在用 Angular 9 编写一个前端来动态展示汇率比率。我正在使用折线图。折线图和自动刷新工作正常。但是我的图表有一个奇怪的错误。我找不到任何看起来像我的问题。我会写我的图表选项和奇怪线的截图。

图表的图片

2 个数据之间的差距是因为服务器关闭而发生的。

更新图片

我发现当我将 xAxes 的类型设置为'time'. 我希望你能理解我的问题。

图表选项：

lineChartOptions = {
animation: {
  duration: 0,
},
responsive: true,
tooltips: {
  mode: 'index',
  intersect: false,
},
hover: {
  mode: 'nearest',
  intersect: false,
},
legend: {
  labels: {
    fontColor: 'white',
    fontSize: 18,
    fontFamily: 'Sawarabi Mincho',
  },
},
scales: {
  xAxes: [
    {
      type: 'time',
      ticks: {
        autoSkip: false,
        maxTicksLimit: 7,
        source: 'auto',
        beginAtZero: true,
      },
      time: {
        parser: 'HH',
        unit: 'minute',
      },
      displayFormats: {
        hour: 'h:mm a',
      },
      distribution: 'linear',
    },
  ],
},
};

另外，这是我发送图表标签数据的功能

  //Defining variables
  chartData: any = [];
  sells: Array<number> = [];
  dates: Array<any> = [];

sendDatasToChart() {
    this.currencyService
      .getMyData()
      .subscribe((data) => (this.chartData = data));
    for (let i of this.chartData) {
      this.sells.push(i['sell']);
      const date = new Date(i['date']);
      const momentDate = moment(date.toISOString());
      this.dates.push(momentDate);
    }
    this.lineChartData = [
      {
        data: this.sells,
        label: 'USD/TRY Currency Chart',
        pointRadius: 0,
      },
    ];
    this.lineChartLabels = this.dates;
    this.sells = [];
    this.dates = [];
    this.chartData = [];
  }

这是我发送到图表的 API 响应的一小部分：

{
"success": true,
"data": [
    {
        "_id": "5eea3c070a60764b08475e88",
        "dollar": {
            "buy": "6,8526",
            "sell": "6,8567",
            "update": "18:45"
        },
        "euro": {
            "buy": "7,6832",
            "sell": "7,6911",
            "update": "18:45"
        },
        "gbp": {
            "buy": "8,5824",
            "sell": "8,5917",
            "update": "18:45"
        },
        "createdAt": "2020-06-17T15:51:35.226Z",
        "__v": 0
    },
    {
        "_id": "5eea3f8b0a60764b08475e89",
        "dollar": {
            "buy": "6,8528",
            "sell": "6,8570",
            "update": "19:00"
        },
        "euro": {
            "buy": "7,6898",
            "sell": "7,6957",
            "update": "19:00"
        },
        "gbp": {
            "buy": "8,5833",
            "sell": "8,5900",
            "update": "19:00"
        },
        "createdAt": "2020-06-17T16:06:35.275Z",
        "__v": 0
    }
   }

此外，这是我正在接收数据的 Angular 服务：

  updateChart(){
return this.http
.get(this.path + "/chart-data").subscribe(
  (response) => {
    for (let i of response['data']) {
      this.chartData.push({
        sell: Number(i['dollar']['sell'].replace(/,/, '.')),
        date: i['createdAt']
      })
    }
    this.myData.next(this.chartData)}
)

}

标签： javascriptangulartypescriptchartschart.js