Загрузить больше исторических данных в линейных диаграммах при панорамировании слева

Question

Я строю данные графика, используя ChartsModule из ng2-чартов. Я также добавил плагин для включения масштабирования и панорамирования.

Проблема в том, что у меня много данных для отображения и печати, но при загрузке страницы я загружаю только данные за последний день и хочу дать пользователю возможность просматривать исторические данные, перемещаясь влево.

я осознаю onPanComplete событие на панорамировании диаграммы и может обновлять наборы данных, но не уверен, как я узнаю, что пользователь достиг левого конца диаграммы, так что я буду загружать больше данных и обновлять наборы данных.

Ниже мой компонент диаграммы:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.scss']
})

export class ChartComponent implements OnInit {
  lineChartData: any;
  chartDataSets: any;

  constructor() { }
  public lineChartOptions
  ngOnInit() {
    var sampleData = [
      {
        "CreateDate": "2019-08-12 15:30:03",
        "NewBuyValue": "16,791.658178"
      },
      {
        "CreateDate": "2019-08-12 14:30:29",
        "NewBuyValue": "16,760.46713691"
      },
      {
        "CreateDate": "2019-08-12 13:30:31",
        "NewBuyValue": "16,792.80212024"
      },
      {
        "CreateDate": "2019-08-12 12:30:27",
        "NewBuyValue": "16,740.86970638"
      }
    ].map(d => {
      return {
        t: new Date(d.CreateDate),
        y: d.NewBuyValue.replace(',', '')
      }
    })
    this.chartDataSets = [{
      label: 'Buy Price',
      backgroundColor: "#2072ef",
      borderColor: '#2072ef',
      type: 'line',
      pointRadius: 0,
      fill: false,
      lineTension: 0,
      borderWidth: 2,
      data: sampleData
    }]

    this.lineChartOptions = {
      pan: {
        enabled: true,
        mode: 'x',
        onPan: function (e) {
          console.log(`I'm panning!!!`, e);
        },
        onPanComplete: function (e) {
          console.log(`I was panned!!!`, e);
          e.chart.config.data.datasets[0].data.pop()
        }
      },
      zoom: {
        enabled: true,
        mode: 'x',
      },
      hover: {
        mode: 'nearest',
        intersect: true
      },
      responsive: true,
      scales: {
        xAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'Time'
          },
          type: 'time',
          distribution: 'series',
          ticks: {
            source: 'data',
            autoSkip: false
          }
        }],
        yAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'Prices'
          }
        }]
      },
      tooltips: {
        intersect: false,
        mode: 'index',
        callbacks: {
          label: function (tooltipItem, myData) {
            var label = myData.datasets[tooltipItem.datasetIndex].label || '';
            if (label) {
              label += ': ';
            }
            label += parseFloat(tooltipItem.value).toFixed(2);
            return label;
          }
        }
      }
    }
    this.lineChartData = []
  }
}

Кроме того, я хотел бы знать, есть ли лучший способ реализовать загрузку данных истории на событие панорамирования

Answer 1

Я загрузил данные за 1 неделю и обновил time.min для xAxis до значения начала текущей даты. Это сделано

this.lineChartOptions.scales.xAxes[0].time.min = chartData.data[0].t - 24 * 3600000