Question

我在甜甜圈图中绘制了文本，我正在使用ChartJs。但是我找不到改变文本字体颜色的方法。

   Chart.pluginService.register({
        beforeDraw: function(chart) {
            if(chart.canvas.id === "myChart") {
                var width = chart.chart.width,
                    height = chart.chart.height,
                    ctx = chart.chart.ctx;

                ctx.restore();
                var fontSize = (height / 114).toFixed(2);
                ctx.font = fontSize + "em sans-serif";
                ctx.textBaseline = "middle";
                ctx.fontColor = "red";
                var text = "75%",
                    textX = Math.round((width - 
                ctx.measureText(text).width) / 2),
                    textY = height / 2;

                ctx.fillText(text, textX, textY);
                ctx.save();
            }
        }
    });

Answer 1

您需要在fillStyle之前定义一个fillText，如下所示。

 Chart.pluginService.register({
        beforeDraw: function(chart) {
            if(chart.chart.canvas.id === "myChart") {
                var width = chart.chart.width,
                    height = chart.chart.height,
                    ctx = chart.chart.ctx;

                ctx.restore();
                var fontSize = (height / 114).toFixed(2);
                ctx.font = fontSize + "em sans-serif";
                ctx.textBaseline = "middle";
                ctx.textColor = "red";
                var text = "75%",
                    textX = Math.round((width - 
                ctx.measureText(text).width) / 2),
                    textY = height / 2;
                ctx.fillStyle = 'rgba(0, 0, 255, 1)';
                ctx.fillText(text, textX, textY);

                ctx.save();
            }
        }
    });

在if语句中，我还检查了chart.canvas.id === "myChart" 我不得不将其更改为chart.chart.canvas.id === "myChart"

如何使用Chart.js在甜甜圈图中更改字体颜色？

1 个答案: