圆环图内的粗体文本 (chart.js)答案

【问题标题】：Bold text inside doughnut chart (chart.js)圆环图内的粗体文本 (chart.js)
【发布时间】：2018-11-18 05:13:54
【问题描述】：

我正在尝试在我的圆环图中设置粗体（使用 chart.js）

下面的代码运行良好，但是 -fontStyle 和 fontWeight-这些根本不起作用。

如何将中心文本更改为粗体？

let ctx = chart.chart.ctx;

ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = '3vh Montserrat';
ctx.fontStyle = 'bold';  // not working!
ctx.fontWeight = '900';  // not working!

http://jsfiddle.net/wh5kcqzy/3/

【问题讨论】：

你能把这段代码添加到JSfiddle吗？
@Jaydp 我添加了:)

标签： javascript charts chart.js

【解决方案1】：

请查看 HTML 画布字体属性。

JavaScript 语法：context.font="italic small-caps bold 12px arial";

参考：https://www.w3schools.com/tags/canvas_font.asp

在你的情况下，只需替换：

let ctx           =   chart.chart.ctx;
let fontSize      =   (height / 100).toFixed(2);

ctx.textAlign     =   'center';
ctx.textBaseline  =   'middle';
ctx.font          =   "bold " + fontSize + "em Montserrat";

【讨论】：