更新chart.js和angular中的图表

问题描述

我遇到了角度更新图表js的问题.我正在使用它的ngrx商店.

I have the problem with update chart js in angular. I am using for it ngrx store.

在选择器订户(在ngOnInit中运行)中，我尝试更新图表数据:

In selector subscriber (run in ngOnInit) I tried update the chart data:

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();
          });
        }
      });
    }
  });
}

我在构造函数中称呼它.

And I call it in constructor.

我知道，我需要运行chart.update().但是仍然有关于图表未定义等的错误.

I know, that I need run chart.update(). But still I have got an error about chart is undefined etc.

推荐答案

使用 ng2-charts 时，无需调用 chart.update()，让Angular变更检测工作.万一它不能按预期工作，请在向其推送新值后重新分配 data 数组.可以使用 Array来完成.slice() ，如下所示.

When using ng2-charts, there's no need to invoke chart.update(), let Angular change detection do its job. In case it doesn't work as expected, reassign the data array after pushing a new value to it. This can be done using Array.slice() as shown below.

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();
    });
  });

但是主要问题可能位于 _registerCustomChartJSPlugin 方法中.与其定义这种方法，不如在 chartPlugins 变量中定义其内容，如下所示:

But the main issue is probably located in the _registerCustomChartJSPlugin method. Instead of defining such a method, define its content in a chartPlugins variable as follows:

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

在HTML模板中，您必须按如下所示提供 chartPlugins .

Inside the HTML template, you then have to provide chartPlugins as follows.

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

请查看以下 StackBlitz .

Please have a look at this StackBlitz.

这篇关于更新chart.js和angular中的图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！