Линейная диаграмма ChartJS - точки, не подключенные для временных рядов в Angular 6

Question

Я работаю в Angular 6, используя ChartJS для 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

Вам необходимо отформатировать значения времени с использованием новой даты ().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'}
]