Chartsjs: изменить цвет шрифта текста в середине

Question

Я начинаю с Javascript и создаю раздел диаграммы для веб-сайта, используя Chart.js.В документации я слышал о «плагинах» и пытался использовать их, как мог, для настройки своих графиков.Я получил довольно хорошие результаты, даже если я уверен, что мы можем получить тот же результат с гораздо меньшим количеством строк кода.

Есть еще одна вещь, которую я не могу сделать прямо сейчас:

1) Я не могу изменить цвет текста (в процентах) в центре графика.Я пытался использовать опцию "fontColor" и Chart.defaults.global.defaultFontColor, но черный цвет не изменился.И я не смог создать плагин для изменения этого свойства.Я видел некоторые примеры здесь, но способ, которым я это сделал, не мог соответствовать этим примерам.

Спасибо за ваше внимание.

См. Раздел здесь: JSFiddle

Вот код JS:

    // Plugins

    var number1 = "100"
    var number2 = "75"
    var number3 = "50"


    var plugin1 = {
    beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx;

    ctx.restore();
    var fontSize = (height / 110).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    ctx.textBaseline = "middle";

    var text = number1 + '%';
        textX = Math.round((width - ctx.measureText(text).width) / 2);
        textY = height / 2;

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


    var plugin2 = {
    beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx;

    ctx.restore();
    var fontSize = (height / 110).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    ctx.textBaseline = "middle";

    var text = number2 + '%',
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

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

    var plugin3 = {
    beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx;

    ctx.restore();
    var fontSize = (height / 110).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    ctx.textBaseline = "middle";

    var text = number3 + '%',
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

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


    // Chart 1

    var canvas1 = document.getElementById('myChart1').getContext('2d');

    var chart1Data = {
    datasets: [ {
        data: [100, 0],
        backgroundColor: ['rgba(118, 109, 255, 1)', 'rgba(118, 109, 255, 0.1)'],
        hoverBorderColor: ['#ffffff','#ffffff'],
        borderWidth: [0, 0],
    }]
    };

    var chart1Options = {
    responsive: true,
    cutoutPercentage: 95,
    animation: {
            animationRotate: true,
            duration: 2000
        },
    legend: {
            display: false
        },
    tooltips: {
            enabled: false
        }
    };


    var inView = false;

    function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
    }

    $(window).scroll(function () {
    if (isScrolledIntoView('#myChart1')) {
        if (inView) {
            return;
        }
        inView = true;
        new Chart(canvas1, {
            type: 'doughnut',
             data: chart1Data,
             options: chart1Options,
             plugins: [plugin1]

             });
    } else {
        inView = false;
    }
    });


    // Chart 2

    var canvas2 = document.getElementById('myChart2').getContext('2d');

    var chart2Data = {
    datasets: [ {
        data: [75, 25],
        backgroundColor: ['rgba(118, 109, 255, 1)', 'rgba(118, 109, 255, 0.1)'],
        hoverBorderColor: ['#ffffff','#ffffff'],
        borderWidth: [0, 0],
    }]
};

var chart2Options = {
    cutoutPercentage: 95,
    animation: {
            animationRotate: true,
            duration: 2000
        },
    legend: {
            display: false
        },
    tooltips: {
            enabled: false
        }
};


var inView2 = false;

function isScrolledIntoView(elem) {
    var docViewTop2 = $(window).scrollTop();
    var docViewBottom2 = docViewTop2 + $(window).height();

    var elemTop2 = $(elem).offset().top;
    var elemBottom2 = elemTop2 + $(elem).height();

    return ((elemTop2 <= docViewBottom2) && (elemBottom2 >= docViewTop2));
}

$(window).scroll(function () {
    if (isScrolledIntoView('#myChart2')) {
        if (inView2) {
            return;
        }
        inView2 = true;
        new Chart(canvas2, {
            type: 'doughnut',
             data: chart2Data,
             options: chart2Options,
             plugins: [plugin2]
             });
    } else {
        inView2 = false;
    }
});


//Chart 3


var canvas3 = document.getElementById('myChart3').getContext('2d');

var chart3Data = {
    datasets: [ {
        data: [50, 50],
        backgroundColor: ['rgba(118, 109, 255, 1)', 'rgba(118, 109, 255, 0.1)'],
        hoverBorderColor: ['#ffffff','#ffffff'],
        borderWidth: [0, 0],
    }]
};

var chart3Options = {
    cutoutPercentage: 95,
    animation: {
            animationRotate: true,
            duration: 2000
        },
    legend: {
            display: false
        },
    tooltips: {
            enabled: false
        }
};


var inView3 = false;

function isScrolledIntoView(elem) {
    var docViewTop3 = $(window).scrollTop();
    var docViewBottom3 = docViewTop3 + $(window).height();

    var elemTop3 = $(elem).offset().top;
    var elemBottom3 = elemTop3 + $(elem).height();

    return ((elemTop3 <= docViewBottom3) && (elemBottom3 >= docViewTop3));
}

$(window).scroll(function () {
    if (isScrolledIntoView('#myChart3')) {
        if (inView3) {
            return;
        }
        inView3 = true;
        new Chart(canvas3, {
            type: 'doughnut',
             data: chart3Data,
             options: chart3Options,
             plugins: [plugin3]

             });
    } else {
        inView3 = false;
    }
});


//Chart 4


var canvas4 = document.getElementById('myChart4').getContext('2d');

var chart4Data = {
    datasets: [ {
        data: [75, 25],
        backgroundColor: ['rgba(118, 109, 255, 1)', 'rgba(118, 109, 255, 0.1)'],
        hoverBorderColor: ['#ffffff','#ffffff'],
        borderWidth: [0, 0],
    }]
};

var chart4Options = {
    cutoutPercentage: 95,
    animation: {
            animationRotate: true,
            duration: 2000
        },
    legend: {
            display: false
        },
    tooltips: {
            enabled: false
        }
};


var inView4 = false;

function isScrolledIntoView(elem) {
    var docViewTop4 = $(window).scrollTop();
    var docViewBottom4 = docViewTop4 + $(window).height();

    var elemTop4 = $(elem).offset().top;
    var elemBottom4 = elemTop4 + $(elem).height();

    return ((elemTop4 <= docViewBottom4) && (elemBottom4 >= docViewTop4));
}

$(window).scroll(function () {
    if (isScrolledIntoView('#myChart4')) {
        if (inView4) {
            return;
        }
        inView4 = true;
        new Chart(canvas4, {
            type: 'doughnut',
             data: chart4Data,
             options: chart4Options,
             plugins: [plugin2],

             });
    } else {
        inView4 = false;
    }
});