问题描述
我的图表完美地显示了它的标签（AxesLabels、DataLabels），定义的 fontSize 以正常分辨率（1920*180）传递给图形的配置。
**STEP1: Defined the chart in my angular component(.html) as:**
<div class="chartStyle">
<canvas #canvas baseChart id="myChart"
[datasets]="lineChartData"
[chartType]="lineChartType"
[labels]="lineChartLabels"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[options]="lineChartOptions"
(chartClick)="chartClicked($event)"></canvas>
</div>
STEP2：从 component(*.ts) 构造函数设置图表字体配置（即 lineChartOptions）：
export class MyChartComponent {
public lineChartType: string;
public lineChartLegend: false;
public lineChartOptions: any;
public lineChartPlugins: any;
//similarly other configs are done
constructor() {
this.setinitialChartData();
}
private setinitialChartData(): void {
this.lineChartType = 'line';
this.lineChartLegend = true;
this.lineChartData = [
{ data: [85,72,78,75,77,75],label: 'Crude oil prices' },];
this.lineChartLabels = ['January','February','march','April','May','June'];
this.lineChartOptions = {
responsive: 'true',plugins: {
datalabels: {
align: 'top',color: 'black',font: {
size: 14,weight: 600
}
}
};
//other methods unrelated
}
以上步骤显示了我当前是如何绘制图表的。
我的问题是：当我以更高的分辨率查看相同的图表时，字体非常小。那么，如何动态设置所有与尺寸相关的配置，以便图表适用于所有分辨率的显示器。
我尝试更改图表的 devicePixelRatio，但遗憾的是它不起作用。
以下是两种分辨率的示例：
正常分辨率：
更高分辨率：
不要混淆，即使我 100% 查看此图表，数据标签的字体大小也不会缩放。
解决方法
在调用 new Chart() 之前，您可以设置默认 fontSize Chart.defaults.global.defaultFontSize = fontSize;，默认为 10。
如果你得到宽度和高度，你可以检查分辨率并根据它调整字体大小。