Javascript 在Charts Js中的图表中添加响应文本

我对编写JS/jquery还不熟悉，希望构建一个包含两行文本的doughnutcharts.JS图表：顶部是较大的百分比，底部是较小的纯文本“类别”，如下图所示

下面的代码取自另一个类似的stackoverflow帖子上的一个fiddle链接，我的成功率有限

努力理解如何有两行响应文本。例如，在不影响上述百分比文本大小的情况下，使预付费按比例增加。非常感谢您的帮助

HTML:

代码：

---

如果我使用您的示例图表作为模板，则可以使用以下代码完成此操作

Chart.pluginService.register{ 绘制前：图表=>{ 设ctx=chart.chart.ctx； ctx.save； 让fontSize=chart.chart.height/75.toFixed2； ctx.font=fontSize+em无衬线； ctx.textBaseline=中间； 设text=chart.data.dataset[0]。数据[0]+'%'； 设textX=Math.roundchart.chart.width-ctx.measureTexttext.width/2； 设textY=chart.chart.height/2.25； ctx.fillTexttext，textX，textY； fontSize=chart.chart.height/124.toFixed2； ctx.font=fontSize+em无衬线； ctx.textBaseline=中间； text=chart.data.labels[0]； textX=Math.roundchart.chart.width-ctx.measureTexttext.width/2； textY=chart.chart.height/1.6； ctx.fillTexttext，textX，textY； ctx.restore； } }; 变量配置={ 键入：“甜甜圈”， 数据：{ 标签：[预付，其他]， 数据集：[{ 数据：[90.8,9.2]， 背景颜色：[黄色，白色] }] }, 选项：{ 图例：{ 显示：假 }, 工具提示：{ 已启用：false }, 门诊量：80， 方面：5， 轮换：70 } }; var ctx=document.getElementByIdmyChart.getContext2d； var myChart=new Chartctx，config；

Chart.pluginService.register({
        beforeDraw: function (chart) {
            if (chart.config.options.elements.center) {
        //Get ctx from string
        var ctx = chart.chart.ctx;

                //Get options from the center object in options
        var centerConfig = chart.config.options.elements.center;
        var fontStyle = centerConfig.fontStyle || 'Arial';
                var txt = centerConfig.text;
                var txtB = centerConfig.textB;
        var color = centerConfig.color || '#000';
        var sidePadding = centerConfig.sidePadding || 20;
        var sidePaddingCalculated = (sidePadding/100) * (chart.innerRadius * 2)

        //Start with a base font of 30px
        ctx.font = "30px " + fontStyle;

                //Get the width of the string and also the width of the element minus 10 to give it 5px side padding
        var stringWidth = ctx.measureText(txt).width;
        var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;

        // Find out how much the font can grow in width.
        var widthRatio = elementWidth / stringWidth;
        var newFontSize = Math.floor(30 * widthRatio);
        var elementHeight = (chart.innerRadius * 2);

        // Pick a new font size so it will not be larger than the height of label.
        var fontSizeToUse = Math.min(newFontSize, elementHeight);

                //Set font settings to draw it correctly.
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
        var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
        ctx.font = fontSizeToUse+"px " + fontStyle;
        ctx.fillStyle = color;


        //Draw text in center
        ctx.fillText(txt, centerX, centerY);            
            }
        }
    });

        var config = {
            type: 'doughnut',
            data: {
                labels: [
                  "Red",
                  "Green",
                  "Yellow"
                ],
                datasets: [{
                    data: [300, 50, 100],
                    backgroundColor: [
                      "#FF6384",
                      "#36A2EB",
                      "#FFCE56"
                    ],
                    hoverBackgroundColor: [
                      "#FF6384",
                      "#36A2EB",
                      "#FFCE56"
                    ]
                }]
            },
        options: {
            legend: {
            display: false},
            cutoutPercentage: 70,
            aspectRatio: 1.5,
            elements: {
                center: {
                    text: '80%' ,
          color: 'black', // Default is #000000
          fontStyle: 'Arial', // Default is Arial
          sidePadding: 20 // Defualt is 20 (as a percentage)
                }
            }
        }
    };

        var ctx = document.getElementById("myChart").getContext("2d");
        var myChart = new Chart(ctx, config);