Chart.js 轴标签字体大小答案

【问题标题】：Chart.js axes label font sizeChart.js 轴标签字体大小
【发布时间】：2016-11-11 08:44:32
【问题描述】：

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

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

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

【问题讨论】：

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

标签： javascript chart.js

【解决方案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();

【讨论】：