21

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

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

4

7 回答 7

51

弄清楚了。

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

于 2016-07-20T22:29:44.107 回答
14

只需设置 baseChart 的高度属性。

<canvas baseChart height="300" ...></canvas>
于 2017-07-16T10:06:43.380 回答
5

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

 <canvas   baseChart
       height="40vh" width="80vw"
       [data]="doughnutChart.data"
       [labels]="doughnutChart.label"
       [chartType]="doughnutChartType"
       (chartHover)="chartHovered($event)"
       (chartClick)="chartClicked($event)">
    </canvas>
于 2017-11-06T10:56:46.990 回答
5

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

这将起作用。

于 2020-01-23T00:12:02.447 回答
2

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

如下所示：

<div class="chart-container" style="position: relative; height:50vh; width:50vw">
      <canvas baseChart
        -----chart property binding here------
      </canvas>
</div>
于 2019-06-25T06:26:52.347 回答
1

将图表选项设置为响应式

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

可以在 CSS 中设置视图宽度

.myclass {
   width: 100vw;
 }
于 2020-09-28T04:38:40.370 回答
0

环境

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

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

于 2019-12-14T16:40:53.117 回答