Question

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

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

Answer 1

想出来。

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

Answer 2

只需设置baseChart的高度属性。

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

Answer 3

在底图

之后设置高度和宽度

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

Answer 4

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

如下所示：

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

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

这将起作用。

Answer 6

设置

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

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

Answer 7

将图表选项设置为响应式

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

可以在CSS中设置视图宽度

.myclass {
   width: 100vw;
 }

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

7 个答案: