如何為我的 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>