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

如何正确使用chartjsdatalabels插件

如何解决《如何正确使用chartjsdatalabels插件》经验,为你挑选了1个好方法。

我正在使用Chart.js创建一个条形码,我必须在每个条形图上显示百分比,所以我找到了chartjs-plugin-datalabels,但是我无法使其工作,文档和示例都不清楚为了我.

这就是我得到的:

HTML:


使用Javascript:

// Bar chart

var valuedata= [2478,5267,734,784,433];
var valuelabel=["Africa", "Asia", "Europe", "Latin America", "North America"];


var myBarChart = new Chart(document.getElementById("bar-chart"), {
    type: 'bar',
    data: {
      labels: valuelabel,
      datasets: [
        {
          label: "Population (millions)",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
          data: valuedata,

        }
      ]
    },
    options: {
      legend: { display: false },
      title: {
        display: true,
        text: 'Predicted world population (millions) in 2050'
      },
      scales: {
    xAxes: [{
                gridLines: {
                    display:false
                }
            }],
    yAxes: [{
                gridLines: {
                    display:false,
                    drawBorder: false
                },
                ticks: {
                display: false
            }
            }]
    },
      plugins: {
                    datalabels: {
                        color: 'white',
                        display: function(context) {
                            console.log("Algo: "+context);
                            return context.dataset.data[context.dataIndex] > 15;
                        },
                        font: {
                            weight: 'bold'
                        },
                        formatter: function(value, context) {
                        return context.dataIndex + ': ' + Math.round(value*100) + '%';
                    }
                    }
                }
    }
});

myBarChart.update();

据说,从我得到的内容中,"插件"内部选项是允许显示值的那个,但正如我在上面的代码中所示,对我来说不起作用,当然我错过了一些东西,但我不知道知道什么,有人可以帮助我吗?

谢谢.

小提琴:

https://jsfiddle.net/s64bq4sw/16/



1> elunap..:

这是因为我使用的Chartjs的版本,这个插件需要2.7.0或更高版本.


推荐阅读
  • 本文深入探讨了 HTML 中的 `margin` 属性,详细解析了其基本特性和应用场景。文章不仅介绍了 `margin` 的基本概念,还重点讨论了垂直外边距合并现象,并分析了 `margin` 在块级元素与内联元素中的不同表现。通过实例和代码示例,帮助读者全面理解 `margin` 的使用技巧和常见问题。 ... [详细]
  • voc生成xml 代码
    目录 lxmlwindows安装 读取示例 可视化 生成示例 上面是代码,下面有调用示例 api调用代码,其实只有几行:这个生成代码也很简 ... [详细]
  • 表面缺陷检测数据集综述及GitHub开源项目推荐
    本文综述了表面缺陷检测领域的数据集,并推荐了多个GitHub上的开源项目。通过对现有文献和数据集的系统整理,为研究人员提供了全面的资源参考,有助于推动该领域的发展和技术进步。 ... [详细]
  • 本文介绍了如何通过掌握 IScroll 技巧来实现流畅的上拉加载和下拉刷新功能。首先,需要按正确的顺序引入相关文件:1. Zepto;2. iScroll.js;3. scroll-probe.js。此外,还提供了完整的代码示例,可在 GitHub 仓库中查看。通过这些步骤,开发者可以轻松实现高效、流畅的滚动效果,提升用户体验。 ... [详细]
  • 本文深入探讨了 MXOTDLL.dll 在 C# 环境中的应用与优化策略。针对近期公司从某生物技术供应商采购的指纹识别设备,该设备提供的 DLL 文件是用 C 语言编写的。为了更好地集成到现有的 C# 系统中,我们对原生的 C 语言 DLL 进行了封装,并利用 C# 的互操作性功能实现了高效调用。此外,文章还详细分析了在实际应用中可能遇到的性能瓶颈,并提出了一系列优化措施,以确保系统的稳定性和高效运行。 ... [详细]
  • 使用 XlsxWriter 模块在 Python 中实现 Excel 单元格内多种格式文本的高效写入
    XlsxWriter 是一个强大的 Python 库,专门用于生成 `.xlsx` 格式的 Excel 文件。该模块不仅支持基本的数据写入,还提供了丰富的格式化选项,能够实现单元格内多种文本样式的高效处理。无论是字体、颜色、对齐方式还是边框,XlsxWriter 都能轻松应对,满足用户在 Excel 视图中的各种需求。 ... [详细]
  • 在单个图表中实现饼图与条形图的精准对齐 ... [详细]
  • 深入解析 Spring MVC 的核心原理与应用实践
    本文将详细探讨Spring MVC的核心原理及其实际应用,首先从配置web.xml文件入手,解析其在初始化过程中的关键作用,接着深入分析请求处理流程,包括控制器、视图解析器等组件的工作机制,并结合具体案例,展示如何高效利用Spring MVC进行开发,为读者提供全面的技术指导。 ... [详细]
  • 本文深入探讨了NDK与JNI技术在实际项目中的应用及其学习路径。通过分析工程目录结构和关键代码示例,详细介绍了如何在Android开发中高效利用NDK和JNI,实现高性能计算和跨平台功能。同时,文章还提供了从基础概念到高级实践的系统学习指南,帮助开发者快速掌握这些关键技术。 ... [详细]
  • 为了深入了解某些测试框架的工作原理,并在培训中构建一个简单的测试框架,我系统地研究了 should.js 的源代码。本文将分享我的学习过程和分析结果,帮助读者更好地掌握 should.js 的核心机制。 ... [详细]
  • 在Unity中进行3D建模的全面指南,详细介绍了市场上三种主要的3D建模工具:Blender 3D、Maya和3ds Max。每种工具的特点、优势及其在Unity开发中的应用将被深入探讨,帮助开发者选择最适合自己的建模软件。 ... [详细]
  • 深入解析Tomcat:开发者的实用指南
    深入解析Tomcat:开发者的实用指南 ... [详细]
  • 本文详细解析了 MySQL 5.7.20 版本中二进制日志(binlog)崩溃恢复机制的工作流程。假设使用 InnoDB 存储引擎,并且启用了 `sync_binlog=1` 配置,文章深入探讨了在系统崩溃后如何通过 binlog 进行数据恢复,确保数据的一致性和完整性。 ... [详细]
  • 优化后的标题:校园互联新方案:10397连接教育未来 ... [详细]
  • Android目录遍历工具 | AppCrawler自动化测试进阶(第二部分):个性化配置详解
    终于迎来了“足不出户也能为社会贡献力量”的时刻,但有追求的测试工程师绝不会让自己的生活变得乏味。与其在家消磨时光,不如利用这段时间深入研究和提升自己的技术能力,特别是对AppCrawler自动化测试工具的个性化配置进行详细探索。这不仅能够提高测试效率,还能为项目带来更多的价值。 ... [详细]
author-avatar
白开水
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有