在向左平移时在折线图中加载更多历史数据

Question

我正在使用ChartsModule中的ng2-charts绘制折线图数据。我还添加了一个启用缩放和平移的插件。

问题是我有很多数据要显示和绘图，但是在页面加载时，我仅加载最近1天的数据，并希望向用户提供一个选项，可以通过向左平移来查看历史数据。

我在图表平移中遇到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 = []
  }
}
此外，我想知道是否有更好的方法来实现对平移事件的历史数据加载

我正在使用ng2-charts中的ChartsModule绘制折线图数据。我还添加了一个启用缩放和平移的插件。问题是我有很多数据要显示和绘制，但是在页面加载时，我是...

Answer 1

我加载了1周的数据，并将xAxis的time.min更新为当前日期开始的值。搞定了