（Ionic 3）如何使charts.js中标签的字体大小响应？

Question

this.barChart = new Chart(this.barCanvas.nativeElement, {
        type: 'bar',
        data: {

          labels: ["", "", "", "", ""],
            datasets: [{
                label: '',
                data: [12, 19, 7, 15,10]
            }]
        },    

  options: {
            scales: {
                xAxes: [{
                gridLines: {
                display:false
                    },
                categoryPercentage: 1.0,
                barPercentage: 0.4,
                scaleLabel: {
                    display: true,
                    fontSize: 10,
                    font: 'Georgia',
                    labelString: 'service request',
                    fontColor: '#808080',
                    padding: 0
                        }

                }],

这是我的打字稿代码 sn-p。字体大小为10，如果手机屏幕小的话没问题，但如果我在平板电脑或更大的屏幕尺寸上查看，它会变得模糊。我不知道如何使条形图标签中的文本响应。

HTML 代码：

        <ion-content>
    <div class="container" style="width:100%; height:25%;">
    <div id="bar" style="position: relative; width:50%; height:100%;">
    <ion-card>
     <ion-card-content >
    <canvas id="bars" #barCanvas></canvas>
    </ion-card-content>
   </ion-card>
  </div>
   </div>
  </ion-content>

Answer 1

另一种可能的方式是根据这个jsfidlle使用Scriptable options

 font: function(context) {
  var width = context.chart.width;
  var size = Math.round(width / 32);
    return {
      size: size,
      weight: 600
    };
}