时间戳

首页 > 解决方案 > Chart.js 增加字体大小以获得更高分辨率（即与监视器无关的图表配置）

angular - Chart.js 增加字体大小以获得更高分辨率（即与监视器无关的图表配置）

问题描述

我的图表完美地显示了它的标签（AxesLabels、DataLabels）以及定义的字体大小，该字体大小以正常分辨率（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，但遗憾的是它不起作用。

以下是两种分辨率的示例： 正常分辨率： 1920 x 1080 分辨率图表

更高的分辨率： 3840 x 2160 分辨率图表

不要混淆，即使我以 100% 的比例查看此图表，数据标签的字体大小也不会缩放。

标签： angularchartschart.jsresolutionng2-charts

解决方案

在调用 new Chart() 之前，您可以设置默认 fontSize Chart.defaults.global.defaultFontSize = fontSize;，默认为 10。

如果你得到宽度和高度，你可以检查分辨率并根据它调整字体大小。

推荐阅读