Angular Chart.js / ng2-charts：水平条，条旁有值

Question

我想在我的Angular应用（ng2-chart库）中使用水平条形图，并在其旁边放置条形的绝对值。但是，在栏旁边显示值时遇到问题。请参阅下面的屏幕截图，现在一些文本是[[inside栏，我不想要。

HTML

  <div style="padding: 10px;">
    <canvas baseChart *ngIf="loaded"
            [data]="barChartData"
            [labels]="barChartLabels"
            [chartType]="barChartType"
            [options]="barChartOptions"
            [colors]="barChartColors"
            [legend]="barChartLegend">
    </canvas>
  </div>

TS

  public barChartOptions: ChartOptions = {
    responsive: true,
    scales: {
      xAxes: [{
        display: false
      }],
      yAxes: [{
        gridLines: {
          display: false
        }
      }]
    },
    animation: {
      duration: 1000,
      onComplete: function () {
          var chartInstance = this.chart,
          ctx = chartInstance.ctx;
          ctx.fillStyle = "#666";
          ctx.textAlign = 'right';
          ctx.textBaseline = 'middle';

          this.data.datasets.forEach(function (dataset, i) {
              var meta = chartInstance.controller.getDatasetMeta(i);
              console.log(meta)
              var canvasWidth = meta.controller.chart.width;
              meta.data.forEach(function (bar, index) {
                  var data = dataset.data[index];                            
                  ctx.fillText('€ ' + formatNumber(data, 'be', '1.2-2'), canvasWidth, bar._model.y);
              });
          });
      }
  }
  };
  public barChartData: SingleDataSet = [1234, 543, 2134, 124, 644, 1640, 2340];
  public barChartLabels: Label[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
  public barChartType: ChartType = 'horizontalBar';
  public barChartLegend = false;
  public barChartColors: Color[] = [{ backgroundColor: 'rgb(31, 78, 120)' }]

[我也尝试在ctx.fillText中执行canvasWidth + 40，在这种情况下，文本完全位于条形旁边，但是在画布的[[outside

上呈现：

Answer 1