开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

ChartJS: datalabels:以饼块为单位显示百分比值

基础概念

Chart.js 是一个基于 HTML5 Canvas 的 JavaScript 图表库，用于创建各种类型的图表，如折线图、柱状图、饼图等。datalabels 是一个 Chart.js 的插件，它允许你在图表的各个数据点上显示额外的信息，例如百分比、数值等。

优势

灵活性：datalabels 插件提供了丰富的配置选项，可以根据需要自定义标签的样式、位置和内容。
易用性：集成简单，只需在初始化图表时引入并配置插件即可。
兼容性：与 Chart.js 完美集成，支持所有 Chart.js 支持的图表类型。

类型

datalabels 插件支持多种类型的标签显示，包括但不限于：

数值
百分比
图例
自定义格式

应用场景

在饼图中显示每个饼块的百分比值是一个常见的应用场景。例如，在数据可视化项目中，需要展示不同类别的占比情况。

示例代码

以下是一个使用 Chart.js 和 datalabels 插件显示饼块百分比值的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chart.js with DataLabels</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
</head>
<body>
    <canvas id="myChart"></canvas>
    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ['Red', 'Blue', 'Yellow'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                plugins: {
                    datalabels: {
                        formatter: (value, ctx) => {
                            let sum = 0;
                            let dataArr = ctx.chart.data.datasets[0].data;
                            dataArr.map(data => {
                                sum += data;
                            });
                            let percentage = (value * 100 / sum).toFixed(2) + "%";
                            return percentage;
                        },
                        color: '#000',
                        font: {
                            weight: 'bold',
                            size: 16,
                        },
                        anchor: 'end',
                        align: 'top',
                    },
                },
                title: {
                    display: true,
                    text: 'Pie Chart with DataLabels'
                }
            }
        });
    </script>
</body>
</html>

参考链接

常见问题及解决方法

问题：百分比值显示不正确

原因：可能是由于数据计算错误或格式化函数不正确导致的。

解决方法：

确保数据总和正确计算。
检查 formatter 函数是否正确实现百分比计算。

formatter: (value, ctx) => {
    let sum = ctx.dataset.data.reduce((a, b) => a + b, 0);
    let percentage = (value * 100 / sum).toFixed(2) + "%";
    return percentage;
}

通过以上步骤，你应该能够正确地在饼图中显示每个饼块的百分比值。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

C++ Qt开发：Charts绘制各类图表详解

Qt 是一个跨平台C++图形界面开发库，利用Qt可以快速开发跨平台窗体应用程序，在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置，实现图形化开发极大的方便了开发效率，本章将重点介绍TreeWidget与QCharts的常用方法及灵活运用。

00

C++ Qt开发：Charts绘制各类图表详解

Qt 是一个跨平台C++图形界面开发库，利用Qt可以快速开发跨平台窗体应用程序，在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置，实现图形化开发极大的方便了开发效率，本章将重点介绍TreeWidget与QCharts的常用方法及灵活运用。

01

CSS 中的各种单位

之前遇到 css 中需要使用单位的情况，都草草用 px 或者百分比糊弄过去，导致当需要做一个响应式的页面的时候，要重新补一下 css 单位的技术债。

02

字节前端都知道的CSS包含块规则

包含块是一个非常重要的概念，通常包含块是当前元素的最近祖先元素的内容区，包含块的形成依赖于CSS position属性。

01

matplotlib 饼图

饼图用来显示展示数据的比例分布特征。matplotlib 中使用 pie() 函数来绘制饼图。

03

padding实现图片等比例自适应

在默认的水平文档流方向下，CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的，这个和top, bottom等属性的百分比值不一样。

01

MPAndroidChart_饼图的那些事

MPAndroidChart攻略——PieChartt的点点滴滴。 MPAndroidChart_折线图的那些事 MPAndroidChart_饼图的那些事 MPAndroidChart_动态柱状图 MPAndroidChart_水平条形图的那些事 MPAndroidChart_并列柱状图,及如何实现点击隐藏掉不需要的条目。 MPAndroidChart_雷达图的那些事及自定义标签颜色目录从简易Demo开始 1. 百分比的设置 2. 标签的设置(标签就是扇形图里的文字) 3. 饼心的设

02

CSS 关于line-height详细讲解

line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

03

CSS基础-属性值单位：px, em, rem, %

在CSS中，尺寸单位是决定元素大小的关键。正确选择和应用单位不仅关乎布局的美观，还直接影响到网站的响应式设计和可访问性。本篇博客将深入浅出地探讨四种常见的属性值单位——像素（px）、相对单位em、rem以及百分比（%），分析它们的特性、应用场景、常见问题以及如何避免这些误区，并提供实用的代码示例。

01

一文读懂 CSS 单位

说起CSS单位，我们最熟悉的可能就是像素单位（px），它是一个绝对单位，也就是说一个10px的文字，放在哪里都是一样大的。单位可以影响颜色、距离、尺寸等一系列的属性。CSS中单位的形式有很多种，下面就分别来看看这些单位。

01

Css 垂直居中

在 CSS 中对元素进行水平居中是非常简单的：如果它是一个行内元素，就对它的父元素应用 text-align:center; 如果它是一个块级元素，就对它自身应用 margin:auto。然而如果要对一个元素进行垂直居中，可能光是想想就令人头皮发麻了。

01

手把手教你用ECharts画饼图和环形图

下面制作一幅基础的饼图，将Echarts中series的type参数值设置为pie，如图4-14所示。

02

【移动端网页布局】移动端网页布局基础概念 ⑥ ( 背景图像缩放 | 不等比例拉伸 - 同时设置宽高值 | 等比例拉伸 - 设置宽度 / cover / contain 值 )

盒子模型的背景图片尺寸是通过 background-size 属性设置的 , 语法如下 :

02

CSS深入理解学习笔记之padding

1、padding与容器尺寸之间的关系对于block水平元素：①padding值暴走，一定会影响尺寸；②width非auto，padding影响尺寸；③width为auto或box-sizing为border-box，同时padding值没有暴走，不影响尺寸。　　对于inline水平元素：水平padding影响尺寸，垂直padding不影响尺寸，但是影响背景色。当垂直padding大到超出父容器，会影响scrollHeight。 2、padding负值和百分比值　　关于padding负值：paddi

07

7个Web前端程序员必须会用CSS技巧

1、元素的margin的top、bottom及padding的top、bottom使用百分比作为单位时，其是相对父元素的宽度width的而不是我们想象的高度height；

00

Highcharts-4-堆叠柱状图

Highcharts-4-柱状图2 本文继续介绍Highcharts中柱状图的制作，主要讲解了3种柱状图的制作：堆叠柱状图分组堆叠柱状图带有百分比堆叠柱状图垂直堆叠柱状图效果图先看下整体的

03

IT课程 CSS基础 021_值类型、单位、大小、颜色

在CSS中，长度单位用于表示尺寸和距离，可以应用于各种属性，如宽度、高度、边距、填充等。

01

weex-21-animation模块

我们在开发应用的时候,常常需要增加一些动画效果,来提高用户体验,经常用到的一些动画效果如下

01

【CSS】CSS 总结 ② ( CSS 字体文本样式 - 大小 / 字体 / 粗细 / 斜体 / 颜色 / 对齐 | CSS 标签显示模式 - 块级元素 / 行内元素 / 行内块元素 ) ★

字体样式的顺序 , 不能打乱 , 必须严格遵守 ; 字体样式属性值之间 , 使用空格隔开 ; font-size 和 font-family 两个样式必须写 , 其它样式可以省略 ;

01

Android MPAndroidChart开源图表库之饼状图的代码

MPAndroidChart是一款基于Android的开源图表库，MPAndroidChart不仅可以在Android设备上绘制各种统计图表，而且可以对图表进行拖动和缩放操作，应用起来非常灵活。MPAndroidChart同样拥有常用的图表类型：线型图、饼图、柱状图和散点图。

03

Highcharts-8-基础饼图绘制

本文中介绍的是如何在jupyter notebook中通过python-highcharts绘制常见的饼图：

03

把所有的东西都对齐吧 - 谈谈垂直居中的解决方案

本文主要介绍了垂直居中显示的常见解决方案，包括使用Flexbox、基于视口的布局以及基于表格布局的方法。这些方法都可以在不同程度上实现垂直居中显示，并且具有较好的兼容性和扩展性。同时，作者还介绍了一些细节和注意事项，以帮助读者更好地理解和应用这些方法。

06

echarts2简单笔记

1、代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> bod

02

css背景图background-position百分比的理解

<position>值支持1~4个值，可以是具体数值，也可以是百分比，也可以是left, top, right, center, bottom关键字。可参考下图经典示意：

03

前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配

前端的一大工作内容就是去兼容页面在不同内核的浏览器，不同的设备，不同的分辨率下的行为，使页面的能正常工作在各种各样的宿主环境当中。

03

快速入门Tableau系列 | Chapter02【数据前处理、折线图、饼图】

上图标记的一些解释： 1、原始数据只能隐藏 2、可删除，标题头可修改自定义拆分数据如下图：

03

一起来学matlab-matlab学习笔记8 基本绘图命令_3 特殊图形绘制

本文为matlab自学笔记的一部分，之所以学习matlab是因为其真的是人工智能无论是神经网络还是智能计算中日常使用的，非常重要的软件。也许最近其带来的一些负面消息对国内各个高校和业界影响很大。但是我们作为技术人员，更是要奋发努力，拼搏上进，学好技术，才能师夷长技以制夷，为中华之崛起而读书！

01

marquee 标签参数详细说明

behavior：设置文本如何滚动。属性值有3种： scroll - 循环滚动。默认值。 slide - 滚动一次。 alternate - 两端来回滚动。

01

CSS 尺寸单位概述

CSS 提供了多种指定元素大小或长度的方式，其中一些更为直观。CSS 单位可分为四大类：

01

css新单位vw,vh在响应式设计中的应用

css3引入的”vw”和”vh”基于宽度/高度相对于窗口大小，”vw”=”view width”, “vh”=”view height”; 以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小。参照demo案例对照下面四个容器的css样式:

01

掌握这些CSS知识点，Coding如飞！

整理了一些在CSS（层叠样式表）中的知识点，或许你曾看过一些什么“万字总结”、“面试必看”，但还是希望更多同学能够沉下心来学习，不仅仅满足于停留在“API工程师”的层面，多从CSS约定的规则去解释现象。

02

可视化格式模型-定位系统

CSS2.1中，一个框(box，就是元素形成的方块等)可以根据三种定位体系布局。常规流(Normal flow) 常规流，是对 normal flow的直译。流者，动也。偏旁是三点水，说明，跟水有

06

CSS进阶-2D变换：translate, rotate, scale

CSS 2D变换为网页设计带来了前所未有的灵活性，让开发者能够轻松实现元素位置移动、旋转和缩放等动态效果，而无需更改HTML结构。本篇文章将深入浅出地探讨translate（平移）、rotate（旋转）和scale（缩放）这三个核心2D变换属性，分析使用过程中常见的问题、易错点以及如何有效避免，同时提供实用的代码示例，助你掌握这些变换技巧。

01

如何完成响应式布局，有几种方法？看这个就够了

[前端CSS高频面试题]如何画0.5px的边框线（详解） CSS3基础属性大全 CSS3动画属性 animation详解（看完就会） CSS3 transform 2D转换之移动旋转缩放（详细讲解看完就会） CSS3 Z—Index 详解 CSS3 positon定位详解（通俗易懂）

03

每个高级前端工程师都应该知道的前端布局

一套适用于手机、iPad 和 PC 的代码。每次加载不同的样式时，它们都能在一个项目中兼容。这就是所谓的响应性。然后，我希望产品经理能多考虑一下。我不想做了设计工作，最后却说它不好看，因为我不会做设计。

02

你不知道的css(三)

1.border border-width不支持百分比 2.单位ex（相对字体和字号的单位）利用ex使图标居中 .icon{ display: inline-block; width: 20px; height: 1ex; background: url() no-repeat center } 此时调节字体大小，图标都会居中 3.line-height line-height就是内联元素的完全高度；是替换元素前一个空白幽灵节点的高度；块级元素无影响 line-heig

03

自己做的饼图丑哭了？5种实用方法替代它！

我们今天讨论的问题大概就是如何作出风味不同的饼，比如，“甜甜圈”和“华夫饼”，让吃饼人不要审美疲劳。

01

Power BI卡片图添加麦肯锡华夫饼百分比

Power BI 2023年6月新推出的卡片图打开了图表新局面（不了解新卡片图参考此文：Power BI可视化的巅峰之作：新卡片图），麦肯锡擅长使用华夫饼图表达百分比，本文介绍新卡片图如何实现类似风格。下图展示了将华夫饼图放在指标右上方，图表和数字相结合。

02

【linux命令讲解大全】126.Linux系统维护工具：mkbootdisk与mke2fs命令详解

mkbootdisk 命令可用于创建能够单独使用的系统引导软盘，以便在系统出现故障时能够启动操作进行适当的修复工作。

01

zabbix配置操作详解（三）

其他的监控系统是将数据存储在rrd数据库里面，不存在数据库越来越大的情况，这跟数据库的环形存储特性有关系。zabbix不管是采用分布式架构还是传统的服务端与客户端直接相连的模式，最终都是将数据存储在mysql里面。

03

linux 查看I/O状态的常用命令

介绍下linux的3个常用I/O相关命令，解决I/O压力过大问题时很有用 iostat 查看磁盘的I/O状态 iotop 查看I/O进程排名 lsof 查看系统或进程打开的文件列表（1）ios

09

Linux的vmstat命令

vmstat命令主要用来提取系统信息，其会生成一个详尽的系统内存和CPU使用情况报告。

01

html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍（转）

HTML精确定位：scrollLeft,scrollWidth,clientWidth,offsetWidth

02

Linux常用性能诊断命令详解

第一行信息依次为：系统时间、运行时间、登录终端数、系统负载（三个数值分别为1分钟、5分钟、15分钟内的平均值，数值越小意味着负载越低）。

06

解决CSS垂直居中的几种方法（基于绝对定位，基于视口单位，Flexbox方法）

在CSS中对元素进行水平居中是非常简单的：如果它是一个行内元素，就对它的父元素应用 text-align: center ;如果它是一个块级元素，就对它自身应用 margin: auto。然而如果要对一个元素进行垂直居中，可能光是想想就令人头皮发麻了。　　多年以来，垂直居中已经成为了CSS领域的圣杯，它同样也是前端开发圈内广为流传的笑话。原因在于它同时具备以下几条特征： 1）它是极其常见的需求。 2）从理论上来看，它似乎极其简单。

07

如何理解iowait

Linux中，%iowait 过高可能是个问题，严重的时候，它能使服务停止，但问题是，多高才算高？什么时候应该担心呢？

03

Linux性能检测常用的9个基本命令

作为一个Linux运维人员，主要就是对Linux服务器的性能做一些优化，本篇博文仅仅介绍如何性能检测常用的指令！

02

软件性能测试（连载5）

线程单元中的处理器队列的即时长度，如果大于CPU数量+1，说明处理器处于堵塞状态。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭