Chart.js 轴标签字体大小

Posted 2023-02-16

【中文标题】Chart.js 轴标签字体大小

【英文标题】：Chart.js axes label font size

【发布时间】：2016-11-11 08:44:32

【问题描述】：

在 chart.js 中，如何在不触及全局配置的情况下仅设置 x 轴标签的字体大小？

我已经尝试将“scaleFontSize”选项设置为我的选项对象。 我也试过设置：

  ...
  scales: 
    xAxes: [
      scaleFontSize: 40
      ...
    ]
   

【问题讨论】：

***.com/a/48580585/7186739

应该更改标题，因为问题和答案集中在轴刻度标签而不是实际的轴标签上，如果您要更改轴标签字体大小，这会造成混淆。跨度>

【参考方案1】：

fontSize 属性实际上在 scales.xAxes.ticks 中，而不是您想象的在 scales.xAxes 中。

所以你只需要像这样编辑属性：

var options = 
    scales: 
        yAxes: [
            ticks: 
                fontSize: 40
            
        ]
    

---

您可以看到fully working example in this jsFiddle，这是它的结果：

【讨论】：

是的，但是如何为没有x 和y 轴的雷达图设置字体大小？

您在解释中引用了 xAxes 刻度，但在 jsFiddle 中将 yAxes 刻度设置为 40。

如何设置标题和标签的字体大小？

【参考方案2】：

chartjs 3.0 的配置选项和属性已更改。目前我正在使用 Chartjs 3.1.1。 Fonts 现在用作对象。要更改 x 轴刻度的字体大小，您必须使用以下配置。

var options = 
    scales: 
        x: 
            ticks: 
                font: 
                    size: 12,
                
            
        
    
;

查看此jsfiddle 示例。

【讨论】：

终于！我到处搜索，其他大多数答案都已过时！

这里是文档链接：chartjs.org/docs/master/general/fonts.html

【参考方案3】：

试试这个是否有效

     options: 
        scales: 
           xAxes: [
                   ticks: 
                    fontSize: 10
                   
                  ]
                
             

【参考方案4】：

试试看是否可行

  ...
  scales: 
    xAxes: [
      fontSize: 40
      ...
    ]
   

看起来scaleFontSize 不是有效属性。

【讨论】：

令人惊讶的是适用于 scaleLabel 的文档很少。

【参考方案5】：

options: 
                  locale: 'fa-IR',
                  responsive: true, // Instruct chart js to respond nicely.
                  maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height 
                        plugins: 
                          legend: 
                              position: 'top',
                              labels: 
                                  font: 
                                    size: 9,
                                    family:'vazir'
                                  
                             
                          ,
                          title: 
                            display: true,
                            text: chart_info.chartTitle,
                            font: 
                                size: 16,
                                family:'vazir'
                            
                          ,
                          tooltip: 
                              bodyFont: 
                                size: 13,
                                family:'vazir'
                              
                         
                    ,
                    scales: 
                        x: 
                            ticks: 
                                font: 
                                    size: 10,
                                    family:'vazir'
                                
                            
                        ,
                        y: 
                            ticks: 
                                font: 
                                    size: 10,
                                    family:'vazir'
                                
                            
                                               
                    
                

【参考方案6】：

试试这个

Chart.defaults.global.defaultFontSize = 8;

【讨论】：

如果您解释了您提供的代码如何回答问题，这将是一个更好的答案。

这并没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方留下评论。 - From Review

【参考方案7】：

目前，我正在使用 ^2.9.4 chart.js。我尝试了此处发布的其他解决方案并进行了一些调整。

    options: 
    scales: 
      yAxes: [
        ticks: 
          minor: 
             fontSize: 16
          
        
      ],
      xAxes: [
        ticks: 
          minor: 
             fontSize: 16
          
        
      ]
     
   

【参考方案8】：

试试这个简单的解决方案：

myChart.options.scales.yAxes[0].ticks.fontSize = 40 ;

myChart.update();