Как изменить цвет шрифта внутри кольцевой диаграммы, используя Chart.js?

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"