使用yii2-chartjs-widget绘制环形图，图例致中心文本偏移求助

问题出在你现在用chart.width和chart.height计算文本位置，当图例显示在侧边时，这两个值包含了图例的宽度，自然导致文本位置偏移。得换成图表实际的绘图区域（chart.chartArea）来计算坐标才对。

改后的插件代码如下：

'plugins' =>
    new \yii\web\JsExpression('
    [{
        id: \'text\',
        afterDatasetsDraw: function(chart) {
            var chartArea = chart.chartArea;
            var ctx = chart.ctx;
            
            ctx.restore();
            var fontSize = (chartArea.height / 50).toFixed(2);
            ctx.font = fontSize + "em sans-serif";
            ctx.textBaseline = "middle";
            ctx.fillStyle = "rgb(200,200,200)";

            var text = "'.$numVal.'",
                // 基于绘图区域的中心计算X坐标，需加上绘图区的左偏移
                textX = chartArea.left + Math.round((chartArea.width - ctx.measureText(text).width) / 2),
                // 基于绘图区域的中心计算Y坐标，需加上绘图区的上偏移
                textY = chartArea.top + chartArea.height / 2;

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

核心改动点：

• 不再使用整个图表的宽高，改用chart.chartArea中的宽高数据，这才是环形图实际绘制区域的尺寸
• 文本的X、Y坐标分别加上绘图区的left和top偏移量，确保定位到绘图区的正中心
• 移除了无意义的参数a和b，简化代码结构

这样调整后，无论图例显示在左侧还是右侧，中心文本都会始终处于环形图的正中央。

内容的提问来源于stack exchange，提问作者shaendle