如何使用Chart.js在甜甜圈图的中心添加文本?

乔瑟

我想用两个值创建一个甜甜圈图。单击图形应在中心打印该值。我在stackoverflow中找到了与我的要求类似的解决方案我想使用来自github的最新Chart.js库最新的Chart.js中提供此功能吗?

大卫

在Chart.js v2.x中当然可以做这样的事情

我认为最好的方法是使用插件。实际上,Cmyker遮篷针对您链接到的问题甚至更新了他的帖子,以显示在Charts.js v2.x中如何工作

看他的小提琴:https : //jsfiddle.net/cmyker/ooxdL2vj/

以及相应的插件定义:

Chart.pluginService.register({
  beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx;

    ctx.restore();
    var fontSize = (height / 114).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    ctx.textBaseline = "middle";

    var text = "75%",
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用ChartJs改变甜甜圈图的厚度?

来自分类Dev

如何使用highcharts创建甜甜圈图?

来自分类Dev

使用Chart.js-为甜甜圈图创建图例

来自分类Dev

具有最小高度的响应式Chart.js甜甜圈图

来自分类Dev

Chart.js甜甜圈图无法正常工作

来自分类Dev

如何在甜甜圈孔饼图的中间居中显示文本?

来自分类Dev

如何使用easypiechart.js创建甜甜圈饼图?

来自分类Dev

Chart.js甜甜圈文本颜色

来自分类Dev

Chart.js使用文本工具提示问题扩展了甜甜圈

来自分类Dev

如何添加到chart.js(甜甜圈图)的链接?

来自分类Dev

如何使用d3js在循环中为甜甜圈图添加工具提示

来自分类Dev

圆角边缘和文本居中的Chart.js甜甜圈

来自分类Dev

使用chart.js在甜甜圈图中心进行事件处理程序

来自分类Dev

允许在标签中使用HTML标签的甜甜圈图JS / Jquery?

来自分类Dev

如何在ECharts中的甜甜圈图中心显示文本?

来自分类Dev

HTML / JS画布甜甜圈图如何使用ovlerap创建圆笔画?

来自分类Dev

如何在Chart.js的甜甜圈图中使用径向CanvasGradients?

来自分类Dev

如何清理甜甜圈图?

来自分类Dev

如何使用ng2-chart更新甜甜圈图的CSS

来自分类Dev

D3.JS和Vue如何创建基本的甜甜圈图

来自分类Dev

如何在Chart.JS的半个甜甜圈图中添加一些文本?

来自分类Dev

如何删除甜甜圈图边框

来自分类Dev

通过chart.js在多系列甜甜圈图中添加标签

来自分类Dev

如何找到饼图/甜甜圈图的半径

来自分类Dev

如何使用highcharts创建甜甜圈图?

来自分类Dev

使用动态数据c3.js创建一个甜甜圈图

来自分类Dev

允许在标签中使用HTML标签的甜甜圈图JS / Jquery?

来自分类Dev

使用 nvd3.js 自定义甜甜圈图

来自分类Dev

Chart.JS:当甜甜圈大小足以容纳文本时,如何仅显示数据标签?

Related 相关文章

  1. 1

    如何使用ChartJs改变甜甜圈图的厚度?

  2. 2

    如何使用highcharts创建甜甜圈图?

  3. 3

    使用Chart.js-为甜甜圈图创建图例

  4. 4

    具有最小高度的响应式Chart.js甜甜圈图

  5. 5

    Chart.js甜甜圈图无法正常工作

  6. 6

    如何在甜甜圈孔饼图的中间居中显示文本?

  7. 7

    如何使用easypiechart.js创建甜甜圈饼图?

  8. 8

    Chart.js甜甜圈文本颜色

  9. 9

    Chart.js使用文本工具提示问题扩展了甜甜圈

  10. 10

    如何添加到chart.js(甜甜圈图)的链接?

  11. 11

    如何使用d3js在循环中为甜甜圈图添加工具提示

  12. 12

    圆角边缘和文本居中的Chart.js甜甜圈

  13. 13

    使用chart.js在甜甜圈图中心进行事件处理程序

  14. 14

    允许在标签中使用HTML标签的甜甜圈图JS / Jquery?

  15. 15

    如何在ECharts中的甜甜圈图中心显示文本?

  16. 16

    HTML / JS画布甜甜圈图如何使用ovlerap创建圆笔画?

  17. 17

    如何在Chart.js的甜甜圈图中使用径向CanvasGradients?

  18. 18

    如何清理甜甜圈图?

  19. 19

    如何使用ng2-chart更新甜甜圈图的CSS

  20. 20

    D3.JS和Vue如何创建基本的甜甜圈图

  21. 21

    如何在Chart.JS的半个甜甜圈图中添加一些文本?

  22. 22

    如何删除甜甜圈图边框

  23. 23

    通过chart.js在多系列甜甜圈图中添加标签

  24. 24

    如何找到饼图/甜甜圈图的半径

  25. 25

    如何使用highcharts创建甜甜圈图?

  26. 26

    使用动态数据c3.js创建一个甜甜圈图

  27. 27

    允许在标签中使用HTML标签的甜甜圈图JS / Jquery?

  28. 28

    使用 nvd3.js 自定义甜甜圈图

  29. 29

    Chart.JS:当甜甜圈大小足以容纳文本时,如何仅显示数据标签?

热门标签

归档