热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

chartjsdatalabels更改饼图内显示的文本的字体和颜色

如何解决《chartjsdatalabels更改饼图内显示的文本的字体和颜色》经验,为你挑选了1个好方法。

我正在使用chartjs

和数据标签

我已经从chartjs及其插件实现了所需的一切。这是我的决赛

这是我的代码

  ( function ( $ ) {
            "use strict";
            /////////////Pie chart START here//////////////////////////////
            var ctx = document.getElementById( "pieChart" );
            ctx.height = 130;
            var myChart = new Chart( ctx, {
            type: 'pie',
            data: {
            datasets: [ {   
            data: [ 40, 20, 10, 3, 7, 15, 4, 52 ],
            backgroundColor: [
            "rgba(0,128,128)",
            "rgba(255,20,147)",
            "rgba(0,0,128)",
            "rgba(0,128,0)",
            "rgba(128,0,0)",
            "rgba(255,0,0)",
            "rgba(218,112,214)",
            "rgba(70,130,180)"
            ],
            hoverBackgroundColor: [
            "rgba(0,128,128)",
            "rgba(255,20,147)",
            "rgba(0,0,128)",
            "rgba(0,128,0)",
            "rgba(128,0,0)",
            "rgba(255,0,0)",
            "rgba(218,112,214)",
            "rgba(70,130,180)"
            ]
            } ],
            labels: [
            "Open",
            "On-Hold (Need Spares)",
            "In-Process",
            "Closed",
            "Re-Open",
            "On-Hold (Condemnation)",
            "On-Hold (For Decision)",
            "On-Hold (For Revision)"
            ]
            },
            options: {
            responsive: true,
                legend: {
                position: 'left',     
                    labels: {
                        fontSize:17,  
                    }
                }
            }

            } );
            /////////////Pie chart END here//////////////////////////////

        } )( jQuery );

现在,我需要更改饼图的每个切片中显示的字体大小和文本(数据)的颜色。有什么帮助吗?

附:我正在使用chart.js v2.7.2



1> 小智..:

我使用Chart js和datalebels来执行此操作,如下所示:

plugins: {
      datalabels: {
        color: #ffffff,
        formatter: function (value) {
          return Math.round(value) + '%';
        },
        font: {
          weight: 'bold',
          size: 16,
        }
      }
    }

当然,在我的示例中,我添加了'%',这就是为什么我在格式化程序中使用该功能的原因。

请记住,“插件”是图表中“选项”的一部分。

这是插件数据标签的页面,您可以做更多的事情


推荐阅读
author-avatar
露絲瑪麗蓮夢露_533
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有