如何使用javascript更改ChartJS字体大小？

我在页面上有一个名为

charts

的图表数组。这是我试图运行以更改字体的代码：

for(var x in charts){
    charts[x].options.scales.yAxes[0].ticks.fontSize = 20;
    charts[x].options.scales.xAxes[0].ticks.fontSize = 20;
    charts[x].update();
}

我知道我正确地到达了

fontSize

属性，因为在控制台中它会向我返回正确的字体大小。更改fontSize后，它将返回正确的值。然而，由于某些原因，实际图表没有更新。

chart.update

命令是否仅用于更新数据

注意：这个问题不是关于使用JS动态更新图表的另一个问题的重复，因为我使用的ChartJS版本是2.7。

在ChartJS版本2.7.0或更高版本中，更改（动态）仅通过设置

ticks

的

fontSize

属性，图表轴刻度的字体大小实际上不会应用于图表。它将只为新设置的字体大小向轴“”添加空格

为了正确更改图表轴刻度的字体大小（适用于图表），您需要为

次要对象（在
刻度下）设置
fontSize
属性，如下所示：

for (var x in charts) {
   // set/change the actual font-size
   charts[x].options.scales.xAxes[0].ticks.minor.fontSize = 20;
   charts[x].options.scales.yAxes[0].ticks.minor.fontSize = 20;

   // set proper spacing for resized font
   charts[x].options.scales.xAxes[0].ticks.fontSize = 20;
   charts[x].options.scales.yAxes[0].ticks.fontSize = 20;

   // update chart to apply new font-size
   charts[x].update();
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩


var myChart1=新图表（ctx1{
键入：“行”，
数据：{
标签：[一月、二月、三月、四月、五月]，
数据集：[{
标签：“利润”，
数据：[30,10,40,20,50]，
背景颜色：“rgba（61208239,0.2）”，
边框颜色：“rgba（61208239,0.6）”
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});
var myChart2=新图表（ctx2{
键入：“行”，
数据：{
标签：[一月、二月、三月、四月、五月]，
数据集：[{
标签：“损失”，
数据：[50,20,40,10,30]，
背景颜色：“rgba（239,92,61,0.2）”，
边框颜色：“rgba（239,92,61,0.6）”
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});
var图表=[myChart1，myChart2]；
函数changeFontSize（）{
对于（图表中的var x）{
//设置/更改字体大小
图表[x].options.scales.xAxes[0].ticks.minor.fontSize=20；
图表[x].options.scales.yAxes[0].ticks.minor.fontSize=20；
//为调整大小的字体设置适当的间距
图表[x].options.scales.xAxes[0].ticks.fontSize=20；
图表[x].options.scales.yAxes[0].ticks.fontSize=20；
//更新图表以应用新字体大小
图表[x]。更新（）；
}
}

更改字体大小
您使用的是哪个版本的chart.js？此人使用的是版本1，您遇到了问题，但在更新到版本2后，他们似乎可以更新图表选项：@earthling I am using 2.7.0尝试以下操作：