如何使用Chart.js 3.2.1版在圆环图中添加文本

zfycwa2u  于 2022-11-06  发布在  Chart.js
关注(0)|答案(3)|浏览(309)

1.我正在使用的HTML使用画布,如何使用添加内的文字圆环图。这里是我的javascript代码和HTML代码。我用图表js版本3.2.1,所以请给同一版本的解决方案(3)。
第一个

flvtvl50

flvtvl501#

你必须使用一个自定义插件
第一个

9rbhqvlz

9rbhqvlz2#

第一个

rslzwgfq

rslzwgfq3#

我正在使用chartjs 3.9.1版做一个内联插件。我已经调整了其他答案以满足我的需要,其中考虑了图表标题和图例。圆圈中心的文本也是基于第0个数据集的总数。

  1. plugins: [{
  2. id: 'doughnutInteriorText',
  3. beforeDraw: function(chart) {
  4. var width = chart.chartArea.width,
  5. height = chart.chartArea.height,
  6. ctx = chart.ctx;
  7. ctx.restore();
  8. var fontSize = (height / 114).toFixed(2);
  9. ctx.font = fontSize + "em sans-serif";
  10. ctx.textBaseline = "middle";
  11. var text = chart.data.datasets[0].data.reduce((partialSum, a) => partialSum + a, 0),
  12. textX = Math.round((width - ctx.measureText(text).width) / 2),
  13. textY = (height / 2) + chart.legend.height + chart.titleBlock.height;
  14. ctx.fillText(text, textX, textY);
  15. ctx.save();
  16. }
  17. }]
展开查看全部

相关问题