如何为我的 ng2-charts 条形图添加标题

Question

我有一个带有以下代码的条形图......效果非常好......除了缺少标题。

ng2-charts 在 API 中是否有标题选项？ 例如“销售图表”。 这些值是从 typescript 文件中提取的。

<div>
  <div style="display: block">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>

Answer 1

您可以将其指定为图表选项的一部分，例如

  private barChartOptions = {
    title: {
      text: 'my title',
      display: true
    }
  };

您可以为字体大小等指定其他属性，请参阅以下文档： http ： //www.chartjs.org/docs/latest/configuration/title.html

Answer 2

public barChartOptions: ChartConfiguration['options'] = {
 
 scales: {
   x: {  ticks: {
     maxRotation: 70,
     minRotation: 70,
  }},
   y: {
     max: 20,
     min: -20, 
   }
 },
 plugins: {
   title: {
     display: true,
     text: 'Title Chart'
 },
   legend: {
     display: true,
     position: 'bottom',
   },
   datalabels: {
     anchor: 'end',
     align: 'end'
   }
 }
};

Answer 3

看起来画布中没有标题选项。 你最好的选择可能是绑定模板中的另一个元素。

chart.component.html

<div>
  <h3>{{ barChartTitle }}</h3>
  <div style="display: block">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>
</div>