ng2-charts：如何在打字稿中动态设置图表标题

Answer 1

很抱歉回复晚了，但在经历了同样的问题并解决之后，我决定无论如何都要发布答案，以便下一个来到此线程的人可以解决它。

问题在于，显然只有对数据和标签进行的更改才会被考虑重新绘制图表。因此，如果您需要更改表格的其他方面，您可能需要使用：

this.chart.refresh();

不要忘记引用视图：

@ViewChild(BaseChartDirective) chart;

这将根据您的最新更改重新绘制图表。

Answer 2

2022 年刚刚遇到同样的问题，接受的答案对我不起作用。以防万一现在有人像我一样再次研究这个问题，我将留下最终对我有用的解决方法。

在 Angular 组件中拥有此属性

chartOptions!: ChartOptions;

然后在 ngOnInit() 中我有

// define chart options
this.chartOptions = this.getChartOptions();

然后在数据可用时返回数据

getChartOptions(): ChartOptions {
    return {
      responsive: true,
      title: {
        display: true,
        text: this.getChartTitle()
      },
    };
  }

2023 年注意事项

如果它仍然不起作用，我们需要通过

plugins

设置它，而不是使用 ng2-charts 的

ChartOptions

对象。查看更多信息https://www.chartjs.org/docs/latest/configuration/title.html

简而言之，我们可以使用另一个这样的函数：

GetChartOptions(newTitle: string): ChartConfiguration['options']
{
    return {
      plugins: {
        title: {
          display: true,
          text: newTitle,
          font: {
            size: 20
          }
        }
      }
    };
}

我们通过更改画布 html 上的属性映射来更改（参见 [options]="lineChartOptions"，单向映射）

<canvas
  baseChart
  class="chart"
  [id]="'line'"
  [data]="lineChartData"
  [options]="lineChartOptions"
  [type]="lineChartType"
  [legend]="true"
></canvas>

可以通过调用

ChangeTitle()

来完成这些操作，并在该代码中调用

GetChartOptions('newTitle anything aaaa')

来填充单向映射属性

  @ViewChild(BaseChartDirective) chart?: BaseChartDirective;

  public lineChartOptions: ChartConfiguration['options'] = {
    plugins: {
      title: {
        display: true,
        text: "Chart Line",
        font: {
          size: 20
        }
      }
    }
  }

  public ChangeTitle()
  {
     this.lineChartOptions = this.GetChartOptions("aaaa");
     this.chart?.chart?.update(); // Don't forget to update, if not it won't be refreshed!
  }

您可以通过用户输入或任何您想要的内容来设置值，并将其放入选项构建器函数中..

Answer 3

使用 ng2-charts v4.1.1 (chartjs v4.x.x)，

render()

功能对我有用：

@ViewChild(BaseChartDirective) chart;

...

this.chart?.render();

来自文档这里

Triggers a redraw of all chart elements. Note, this does not update elements for new data. Use .update() in that case.