Ng2-charts应用程序不显示图表

Question

我按照ng2-charts演示页面上的说明进行设置。我使用的是angular-cli，所以我也使用System.JS导入了这些包。然后我复制了演示代码，但它无法显示。正在创建画布，但没有绘制图表。我的组件和模板代码与这里完全相同。

Answer 1

在canvas标签周围使用<div style="display: block">

你最终的html代码应该看起来像这样

<div style="display: block">
  <canvas
    baseChart
    [chartType]="'line'"
    [datasets]="chartData"
    [labels]="chartLabels"
    [options]="chartOptions"
    [legend]="true"
    (chartClick)="onChartClick($event)">
  </canvas>
</div>

Answer 2

responsive: true有时会出现问题。

Answer 3

如果您正在从API获取数据，请尝试此

@ViewChild(BaseChartDirective) chart?: BaseChartDirective;
getChartData(){
  // do something
  this.chart?.chart?.update()
}

Answer 4

为未来的搜索者添加

在我的例子中，它是图表类型。我用的是horizontalbar。当我将其更改为bar或horizontalBar时，它可以工作。