如何使用 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 元素上设置了高度 属性,例如 <canvas height="400">,但该元素被 ng2-charts 组件遮盖了。

想通了。

如果设置了 responsive: truemaintainAspectRatio: false 设置,则可以设置 <base-chart> 元素的 css 高度 属性。

只需设置 baseChart 的高度 属性。

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

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

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

要提供高度或宽度,您需要在 <canvas><canvas/> 元素周围使用包装器 <div><div/> 元素,然后应使用相对位置样式和高度装饰 div 元素和宽度参考视口大小(浏览器 window 大小)。

如下所示:

<div class="chart-container" style="position: relative; height:50vh; width:50vw">
      <canvas baseChart
        -----chart property binding here------
      </canvas>
</div>

设置

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

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

在 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>

这行得通。

将图表选项设置为响应

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

视图宽度可以在CSS

中设置
.myclass {
   width: 100vw;
 }