如何使用 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: true
和 maintainAspectRatio: 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;
}
如何使用 ng2-charts 设置图表的高度?我正在制作折线图,就像 ng2-charts 网站上的演示一样。
我在文档中搜索了 ng2-charts 和 chart.js。在 chart.js 中,您似乎在 canvas 元素上设置了高度 属性,例如 <canvas height="400">
,但该元素被 ng2-charts 组件遮盖了。
想通了。
如果设置了 responsive: true
和 maintainAspectRatio: 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;
}