ChartJS线形图-点在角度6中的时间序列连接不正确

Question

我正在Angular 6中使用ChartJS for Angular。

我正在尝试使用折线图绘制值的时间序列。该折线图绘制了x和y值，其中x是时间（作为unix时间戳传递给它），y是某个值。不幸的是，当ChartJS绘制此图时，我的观点最终被绘制为“乱序”，或者我认为。

下面，我包括了我使用的图表选项。有没有可以让我拥有漂亮的时间序列线的设置？如果将X切换为整数，则得到的图看起来很正常。

在Component.ts文件中：

  public chartData = [
    {data: [
      {x: 1539156000000, y: 0},
      {x: 1539156480000, y: 0},
      {x: 1539156300000, y: 0},
      {x: 1539156600000, y: 3051},
      {x: 1539155640000, y: 0}
    ], 
      label: 'A1', fill: false, borderColor: 'red'}
  ];

 public chartType = 'line';
 public chartLegend = true;

  public chartOptions = {
    elements: {
      line: {
          tension: 0 // disables bezier curves
      }
    },
    scaleShowVerticalLines: false,
    responsive: true,
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true
          }
        }
      ],
      xAxes: [{
        type: 'time',
        distribution: 'series',
        time: {
          unit: 'minute'
        }
      }]
    }
  };

如果很好奇，在component.html文件中，我有一段看起来像这样的代码：

  <canvas baseChart
          [datasets]="chartData"
          [options]="chartOptions"
          [legend]="chartLegend"
          [chartType]="chartType">
  </canvas>

所需的图表外观（通过将X从时间更改为整数（例如：1、2、3、4，但我希望能够使用Unix时间戳来产生）。

Answer 1

您需要使用新的Date（）格式化时间值。 ChartJS假定它是一个日期。

尝试以下方法是否有效：

 public chartData = [
{data: [
  {x: Date.parse(1539156000000), y: 0},
  {x: Date.parse(1539156480000), y: 0},
  {x: Date.parse(1539156300000), y: 0},
  {x: Date.parse(1539156600000), y: 3051},
  {x: Date.parse(1539155640000), y: 0}
], 
  label: 'A1', fill: false, borderColor: 'red'}
]