Javascript 在chartjs和angular中更新图表

我在angular中有更新图表js的问题。我正在使用它的ngrx商店

在selector subscriber（在Ngonit中运行）中，我尝试更新图表数据：

this.yrSubscription = this.userDataStore.pipe(select(selectYrReport))
  .subscribe(el => {
    el.sessions.forEach(item => {
      this.datasetsSessions[0].data.push(+item);
    });
  });

datasetsSessions: ChartDataSets[] = [{
  label: 'Sessions',
  data: [],
  fill: false
}];

和我的图表数据：

this.yrSubscription = this.userDataStore.pipe(select(selectYrReport))
  .subscribe(el => {
    el.sessions.forEach(item => {
      this.datasetsSessions[0].data.push(+item);
    });
  });

datasetsSessions: ChartDataSets[] = [{
  label: 'Sessions',
  data: [],
  fill: false
}];

登记表：

private _registerCustomChartJSPlugin(): void {
  (window as any).Chart.plugins.register({
    afterDatasetsDraw: (chart, easing): any => {
      if (!chart.options.plugins.xLabelsOnTop
        || (chart.options.plugins.xLabelsOnTop && chart.options.plugins.xLabelsOnTop.active === false)) {
        return;
      }

      const ctx = chart.ctx;

      chart.data.datasets.forEach((dataset, i): any => {
        const meta = chart.getDatasetMeta(i);
        if (!meta.hidden) {
          meta.data.forEach((element, index): any => {
            // Draw the text in black, with the specified font
            ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
            const fontSize = 13;
            const fontStyle = 'normal';
            const fontFamily = 'Roboto, Helvetica Neue, Arial';
            ctx.font = (window as any).Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

            const dataString = dataset.data[index].toString() + 'k';

            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            const padding = 15;
            const startY = 24;
            const position = element.tooltipPosition();
            ctx.fillText(dataString, position.x, startY);

            ctx.save();

            ctx.beginPath();
            ctx.setLineDash([5, 3]);
            ctx.moveTo(position.x, startY + padding);
            ctx.lineTo(position.x, position.y - padding);
            ctx.strokeStyle = 'rgba(255,255,255,0.12)';
            ctx.stroke();

            ctx.restore();
          });
        }
      });
    }
  });
}

我在构造函数中调用它

---

我知道，我需要run chart.update（）。但我仍然有一个关于图表未定义等的错误。

上面的组件装饰器有以下内容：-

var require: any;
var Chart = require('chart.js');

在组件中有一个用于保存图表实例的属性

public chart: Chart;

首先需要了解的是，Chart.plugins.register只会为所有图表全局注册一个插件。

要应用此插件，您需要一个图表

假设您的HTML中有一个画布，如：-

<div>
  <canvas id="canvas">{{ chart }}</canvas>
</div>

---

假设您正在同一组件中注册图表。首先，您需要保留对自定义图表的引用。在组件中，将其添加到组件类中

customChartInstance : Chart;

然后在您的

afterDatasetsDraw

中添加

this.customChartInstance=chart

然后在订阅中添加

 this.chart.update();

---

使用

ng2图表时

，无需调用

chart.update（）

，让角度变化检测完成其工作。如果它不能按预期工作，请在将新值推送到

数据

数组后重新分配该数组。这可以使用如下所示的方法完成

this.yrSubscription = this.userDataStore.pipe(select(selectYrReport))
  .subscribe(el => {
    el.sessions.forEach(item => {
      this.datasetsSessions[0].data.push(+item);
      this.datasetsSessions[0].data = this.datasetsSessions[0].data.slice();
    });
  }); 

但是主要的问题可能在于

\u registerCustomChartJSPlugin

方法。不要定义这种方法，而是在

chartPlugins

变量中定义其内容，如下所示：

chartPlugins = [{
  afterDatasetsDraw: (chart, easing): any => {
    ...
  }
}];

在HTML模板中，您必须提供

chartPlugins

，如下所示

<canvas baseChart
  [datasets]="datasetsSessions"
  [plugins]="chartPlugins"
  ...
</canvas>

---

在ngoninitA中运行是的，我在ngoninit中运行它。我很抱歉错过了那个信息。chart.update（）的主要问题；仍然存在未定义的问题。您能给出一个stackblitz吗？以及为什么在寄存器中没有ctx？第一个参数通常是ctx？不-它不正确。图表工作正常，只是更新有问题。我认为应该在更新API之前使用，但我有问题。在其他组件中，您在哪里创建图表？你能告诉我它是什么吗？或者，如果它在这个组件中，您可以共享html吗？加寄存器语句不会错。正如我从官方医生那里得到的。请打开我提供的链接