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

Question

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

问题是我有很多数据要显示和绘制，但在页面加载时，我只加载最近 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 = []
  }
}

此外，我想知道是否有更好的方法来实现平移事件的历史数据加载

Answer 1

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

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

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

Load more historical data in Line charts on panning left

chart.js

ng2-charts

chartjs-plugin-zoom