英文:
Text in the middle of a doughnut for charjs
问题
I everybody,
我在我的项目中使用2amigos/yii2-chartjs-widget。现在我画出了带有文本的甜甜圈。它工作正常，但如果我在左边或右边显示图例，文本就不在甜甜圈的中间。
我的代码：
'plugins' =>
new \yii\web\JsExpression('
[{
id: \'text\',
afterDatasetsDraw: function(chart, a, b) {
var width = chart.width,
height = chart.height,
ctx=chart.ctx;
ctx.restore();
var fontSize = (height / 50).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
ctx.fillStyle ="rgb(200,200,200)";
var text = '.$numVal.',
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}]')
我希望你们中的一位能给我一些建议。
非常感谢...
英文:
I everybody,
i use 2amigos/yii2-chartjs-widget in my project. Now i draw doughnuts with a text inside. It works fine, but if i display a legend on left or right side, the text is not in the middle of the doughnut.
My code:
'plugins' =>
new \yii\web\JsExpression('
[{
id: \'text\',
afterDatasetsDraw: function(chart, a, b) {
var width = chart.width,
height = chart.height,
ctx=chart.ctx;
ctx.restore();
var fontSize = (height / 50).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
ctx.fillStyle ="rgb(200,200,200)";
var text = "'.$numVal.'",
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}]')
I hope ones of you has a tip for me.
Thanks very much...
答案1
得分: 2
你不应该使用图表DOM元素的大小，而应该使用图表区域。
[{
id: 'text',
afterDatasetsDraw: function(chart) {
const {ctx, chartArea} = chart;
const {left, top, width, height} = chartArea;
ctx.save();
var fontSize = (height / 50).toFixed(2); // 在我看来，这应该重新评估
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
ctx.fillStyle = "rgb(200,200,200)";
var text = '.$numVal.',
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, left + textX, top + textY);
ctx.restore();
}
}]
英文:
You shouldn't use the chart dom element size but the chart area.
[{
id: 'text',
afterDatasetsDraw: function(chart) {
const {ctx, chartArea} = chart;
const {left, top, width, height} = chartArea;
ctx.save();
var fontSize = (height / 50).toFixed(2); // In my opinion this should be reevaluated
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
ctx.fillStyle ="rgb(200,200,200)";
var text = "'.$numVal.'",
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, left + textX, top + textY);
ctx.restore();
}
}]
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论