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

FranzHuber23

我将Chart.JSChart.JS 数据标签插件一起使用当甜甜圈切片大小足以容纳文本时,是否可以仅显示数据标签?

我有以下示例:

https://jsfiddle.net/7vg5w4mq/

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
        plugins: [ChartDataLabels],
    type: 'doughnut',
    options:{
      plugins: {
        datalabels: {
          color: '#000000',
          display: true,
          formatter: function (value, ctx) {
            return value + " kWh";
          }
        }
      },
      rotation: 1 * Math.PI,
      circumference: 1 * Math.PI
    },
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red1", "Blue1", "Yellow1", "Green1", "Purple1", "Orange1", "Red2", "Blue2", "Yellow2", "Green2", "Purple2", "Orange2"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    }
});

我知道,这个例子没有任何意义,但你可以看到问题所在。

如果有很多数据,数据标签会像这样溢出甜甜圈切片大小:

在此处输入图片说明

是否可以选择告诉 Chart.JS 仅在文本适合甜甜圈时显示这些标签?(否则只显示工具提示)。

仅检查值百分比的选项不起作用,因为图表本身(或浏览器窗口的大小)可以调整为非常小的大小(并且百分比将不再适合)。

注意:这与Chart.JS不是同一个问题:当条形宽度对于文本来说足够大时,我怎样才能只显示数据标签?因为在那里我要求同样的事情,但是要一个条形图!

FranzHuber23

我现在结合使用两个想法:

  • 仅当值的特定百分比阈值未低于值时才显示值
  • 仅当特定图形宽度未超出范围时才显示值

下面的例子展示了这个想法:

formatter: function(value) {
    let percentage = (value.toFixed(2) / sum) * 100;

    if (percentage > 100) {
        percentage = 100;
    }

    if (percentage < 10) {
        return "";
    }

    if (ctx.width <= 200) {
        return "";
    }

    return value + " kWh";
}

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Chart.js设置甜甜圈背景色?

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

如何在Chart.js中的甜甜圈图上显示标签

来自分类Dev

Chart.js甜甜圈文本颜色

来自分类Dev

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

来自分类Dev

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

来自分类Dev

如何更改chart.js甜甜圈图上的鼠标光标?

来自分类Dev

带有圆角的Chart.js甜甜圈

来自分类Dev

Chart.js 2.0甜甜圈工具提示百分比

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

在Chart.js甜甜圈图上检测onHover是否完成

来自分类Dev

甜甜圈Chart.JS中是否有办法显示100%

来自分类Dev

如何在Chart.js甜甜圈图上显示第二组标签?

来自分类Dev

Javascript和Chart.JS-在3个甜甜圈孔图中获得唯一文本的问题-为所有3个甜甜圈孔显示相同的文本

来自分类Dev

在混合图表中Chart.js不同的甜甜圈厚度

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

Chart.js:甜甜圈中间的千位分隔符和标题

来自分类Dev

Chart.js-填充文本仅在悬停在甜甜圈的一部分上时出现

来自分类Dev

Chart.js甜甜圈动画/顺时针绘制

来自分类Dev

Chart.js v2:甜甜圈内甜甜圈之间的空间

来自分类Dev

Chart.js - 甜甜圈显示活动段工具提示(点击外部按钮)

Related 相关文章

  1. 1

    Chart.js设置甜甜圈背景色?

  2. 2

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

  3. 3

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

  4. 4

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

  5. 5

    如何在Chart.js中的甜甜圈图上显示标签

  6. 6

    Chart.js甜甜圈文本颜色

  7. 7

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

  8. 8

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

  9. 9

    如何更改chart.js甜甜圈图上的鼠标光标?

  10. 10

    带有圆角的Chart.js甜甜圈

  11. 11

    Chart.js 2.0甜甜圈工具提示百分比

  12. 12

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

  13. 13

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

  14. 14

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

  15. 15

    在Chart.js甜甜圈图上检测onHover是否完成

  16. 16

    甜甜圈Chart.JS中是否有办法显示100%

  17. 17

    如何在Chart.js甜甜圈图上显示第二组标签?

  18. 18

    Javascript和Chart.JS-在3个甜甜圈孔图中获得唯一文本的问题-为所有3个甜甜圈孔显示相同的文本

  19. 19

    在混合图表中Chart.js不同的甜甜圈厚度

  20. 20

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

  21. 21

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

  22. 22

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

  23. 23

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

  24. 24

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

  25. 25

    Chart.js:甜甜圈中间的千位分隔符和标题

  26. 26

    Chart.js-填充文本仅在悬停在甜甜圈的一部分上时出现

  27. 27

    Chart.js甜甜圈动画/顺时针绘制

  28. 28

    Chart.js v2:甜甜圈内甜甜圈之间的空间

  29. 29

    Chart.js - 甜甜圈显示活动段工具提示(点击外部按钮)

热门标签

归档