调整 ChartJS 中额外的 fillText 标签的字体大小和系列

Question

我已经创建了一个非常好的 ChartJS 系统，但是在破坏额外的 x 轴标签和标题字体细节方面遇到了麻烦。出于某种原因，他们一样想要一样。

首先，我得到帮助的解决方案在这里： SO answer

图表看起来不错：

如您所见，标题和附加 x 轴标签的字体大小相同。这是由于以下配置选项造成的：

        // context.xAxes.font 
        context.font = this.config.get("chart.axis.font");
        context.fontSize = 100;

        context.fillStyle = this.config.get("chart.axis.font.color");
        context.textAlign = 'center';
        context.fillText(line, x, y);

我以这种方式设置了配置选项：

                    title: {
                        display: true,
                        fontSize: 10,                           
                        text: this.options.title,
                        padding: titlePadding,         
                    },

我不知道为什么 fillText 对标题和额外类别都有效。

Answer 1

据我所知，canvas rendering context 上没有 fontSize 属性。您应该改用其font 属性来指定字体的粗细、大小和系列。

请看一下answer中提供的可运行代码sn-p。