关于角度：如何使用ng2-charts设置图表的高度


How can I set the height of a chart with ng2-charts

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

我在ng2-charts和chart.js的文档中进行了搜索。 在chart.js中，似乎您在之类的canvas元素上设置了height属性，但是该元素被ng2-charts组件遮盖了。

弄清楚了。

如果设置了responsive: true和maintainAspectRatio: false设置，则可以设置元素的css height属性。

相关讨论

只需设置baseChart的height属性。

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

只需在基本图表后设置高度和宽度

1
2
3
4
5
6
7
8
 <canvas   baseChart
       height="40vh" width="80vw"
       [data]="doughnutChart.data"
       [labels]="doughnutChart.label"
       [chartType]="doughnutChartType"
       (chartHover)="chartHovered($event)"
       (chartClick)="chartClicked($event)">
    </canvas>

要提供高度或宽度，您需要在元素周围使用包装器元素，然后应使用相对位置样式装饰div元素，并参考视口大小(浏览器窗口大小)对高度和宽度进行装饰)。

如下所示：

1
2
3
      <canvas baseChart
        -----chart property binding here------
      </canvas>

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

1
2
3
chartOptions = {
responsive: true,
maintainAspectRatio: false,

}

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

1
2
3
4
5
6
7
8
9
10
  <canvas
      baseChart
      [chartType]="'line'"
      [datasets]="chartData"
      [labels]="chartLabels"
      [colors]="lineChartColors"
      [options]="chartOptions"
      [legend]="true"
      (chartClick)="onChartClick($event)">
  </canvas>

这将起作用。

将图表选项设置为响应式

1
2
3
4
chartOptions: ChartOptions = {
  responsive: true,
  maintainAspectRatio: false,
};

视图宽度可以在CSS中设置

1
2
3
.myclass {
   width: 100vw;
 }

设置

1
<canvas style="width: inherit;height: inherit;"

将根据图表的父容器大小进行调整