如何使用ng2-charts设置图表的高度

Question

如何使用ng2-charts设置图表的高度？我正在制作折线图,就像ng2-charts网站上的演示一样.

我搜索了ng2-charts和chart.js的文档.在chart.js中,您看起来像在canvas元素上设置了一个height属性<canvas height="400">,但是该元素被ng2-charts组件遮盖了.

Answer 1

弄清楚了.

如果设置了responsive: true和maintainAspectRatio: false设置,则可以设置<base-chart>元素的css height属性.

Answer 2

在ts文件中，将chartOptions声明为::

chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
}

同样，在 html 文件属性中绑定 [options]="chartOptions" 并在 div 标签中设置所需的高度、宽度

<div style="display: block; width: 500px; height: 400px;">
  <canvas
      baseChart
      [chartType]="'line'"
      [datasets]="chartData"
      [labels]="chartLabels"
      [colors]="lineChartColors"
      [options]="chartOptions"
      [legend]="true"
      (chartClick)="onChartClick($event)">
  </canvas>
</div>

这会起作用。

Answer 3

只需设置baseChart的height属性。

<canvas baseChart height="300" ...></canvas>

Answer 4

只需在 basechart 后设置高度和宽度

 <canvas   baseChart
       height="40vh" width="80vw"
       [data]="doughnutChart.data"
       [labels]="doughnutChart.label"
       [chartType]="doughnutChartType"
       (chartHover)="chartHovered($event)"
       (chartClick)="chartClicked($event)">
    </canvas>