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;
    }
});