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

【问题标题】：How can I set the height of a chart with ng2-charts如何使用 ng2-charts 设置图表的高度
【发布时间】：2016-11-23 21:43:59
【问题描述】：

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

我在文档中搜索了 ng2-charts 和 chart.js。在 chart.js 中，您似乎在 canvas 元素上设置了一个 height 属性，例如 <canvas height="400">，但该元素被 ng2-charts 组件遮挡。

【问题讨论】：

标签： angular ng2-charts

【解决方案1】：

想通了。

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

【讨论】：

必须在options属性中。
你可以在Chart.js documentation找到对此的解释
响应式也是饼图的属性？如果不是，我该如何设置饼图的高度？

【解决方案2】：

只需设置baseChart的一个height属性即可。

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

【讨论】：

【解决方案3】：

在basechart之后设置高度和宽度

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

【讨论】：

【解决方案4】：

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

这会起作用。

【讨论】：

【解决方案5】：

要提供高度或宽度，您需要在 <canvas><canvas/> 元素周围使用包装器 <div><div/> 元素，然后应该使用相对位置样式以及参考视口大小的高度和宽度来装饰 div 元素（浏览器窗口大小）。

如下所示：

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

【讨论】：

【解决方案6】：

将图表选项设置为响应式

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

可以在 CSS 中设置视图宽度

.myclass {
   width: 100vw;
 }

【讨论】：

【解决方案7】：

设置

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

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

【讨论】：