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

Question

我是写JS / jquery的新手，并希望构建一个包含两行文本的甜甜圈chart.js图表​​：顶部较大的百分比，底部较小的仅“类别”文本，如下图所示。

Sample Chart

我从下面的代码中获得的成功有限，该代码取自另一个类似的stackoverflow帖子上的小提琴链接https://jsfiddle.net/cmyker/ooxdL2vj/

努力理解如何有两行响应文本。例如使“预付费”按比例缩放，而不会影响上述百分比文本的大小。任何帮助是极大的赞赏。

HTML：<canvas id="myChart"> </canvas>

代码：

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

Answer 1

如果我将样本图用作模板，则可以使用以下代码完成。

Chart.pluginService.register({
    beforeDraw: (chart) => {
        let ctx = chart.chart.ctx;
        ctx.restore();
        
        let fontSize = (chart.chart.height / 75).toFixed(2);
        ctx.font = fontSize + "em sans-serif";
        ctx.textBaseline = "middle";                
        let text = chart.data.datasets[0].data[0] + '%';
        let textX = Math.round((chart.chart.width - ctx.measureText(text).width) / 2);
        let textY = chart.chart.height / 2.25;
        ctx.fillText(text, textX, textY);
        
        fontSize = (chart.chart.height / 124).toFixed(2);
        ctx.font = fontSize + "em sans-serif";
        ctx.textBaseline = "middle";                
        text = chart.data.labels[0];
        textX = Math.round((chart.chart.width - ctx.measureText(text).width) / 2);
        textY = chart.chart.height / 1.6;
        ctx.fillText(text, textX, textY);
                
        ctx.save();
    }
});

var config = {
    type: 'doughnut',
    data: {
        labels: ["Prepaid", "Others"],
        datasets: [{
            data: [90.8, 9.2],
            backgroundColor: ["yellow", "white" ]
        }]
    },
    options: {
        legend: {
            display: false
        },
        tooltips: {
            enabled: false
        },
        cutoutPercentage: 80,
        aspectRatio: 5,
        rotation: 70
    }
};

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"> </canvas>