Angular-chart.js空白div

Question

我試圖顯示一個圖表，其中在TypeScript控制器中初始化選項，標簽和其他數據，然后在HTML頁面上使用它。 但是我得到空白的div並且沒有輸出。 請幫忙。

我使用nuget軟件包管理器安裝了angular-chart.js 。

TypeScript控制器：

$onInit() {
  this.Init();
  this.labels = ["January", "February", "March", "April", "May", "June", "July"];
  this.series = ['Series A', 'Series B'];
  this.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
  this.onClick = function(points, evt) {
    console.log(points, evt);
  };
  this.datasetOverride = [{
    yAxisID: 'y-axis-1'
  }, {
    yAxisID: 'y-axis-2'
  }];
  this.options = {
    scales: {
      yAxes: [{
          id: 'y-axis-1',
          type: 'linear',
          display: true,
          position: 'left'
        },
        {
          id: 'y-axis-2',
          type: 'linear',
          display: true,
          position: 'right'
        }
      ]
    }
  };
}

HTML：

<canvas id="line" class="chart chart-line" chart-data="{{$ctrl.data}}"
        chart-labels="{{$ctrl.labels}}" chart-series="{{$ctrl.series}}" 
        chart-options="{{$ctrl.options}}" chart-dataset-override="{{$ctrl.datasetOverride}}">
</canvas>

Answer 1

綁定數據時請勿使用插值，將其更改為

<canvas id="line" class="chart chart-line" chart-data="$ctrl.data"
        chart-labels="$ctrl.labels" chart-series="$ctrl.series" chart-options="$ctrl.options" chart-dataset-override="$ctrl.datasetOverride"></canvas>