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

Question

我已经创建了一个非常好的 ChartJS 系统，但在打破额外的 x-axis 标签和标题字体细节时遇到了问题。由于某种原因，他们同样希望成为相同的人。

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

图表看起来不错：

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

        // 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. You should use its font 属性上没有 fontSize 属性来指定字体的粗细、大小和系列。

请查看此 answer 中提供的可运行代码片段。

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

Adjusting the font size and family of extra fillText labels in ChartJS

data-visualization

chart.js