Chart.js v2.6:向饼图输出值添加箭头

2024-01-01

我正在使用 Chart.js v2.6 输出饼图。数据是从MySQL数据库中获取的。图表渲染正确,但我需要向数据值添加箭头,如下面的屏幕截图所示。

带箭头的饼图示例:

下面是我使用 Chart.js 输出饼图的代码:

var chartdata_order_status = {
    labels: status,
    datasets: [{
        label: 'Order status',
        backgroundColor: ["#00b0f0","#92d050","#ffc000","#ff6dd9"],
        data: count_status
    }]
};

var pieGraph = new Chart(ctx3, {
    type: 'pie',
    data: chartdata_country_orders,
    options: {
        pieceLabel: {
            mode: 'value',
            position: 'outside',
            fontColor: '#000',
            format: function (value) {
                return '$' + value;
            }
        },
        title: {
            display: true,
            text: 'Total Sales by Country - Top 5',
            fontSize: 15,
            fontStyle: 'bold'
        },
        legend: {
            display: true,
            position: 'bottom',
        },
    } 
});

我没有包含从 MySQLtable 获取数据的 PHP 代码。


您现在可以使用Chart.PieceLabel.js https://github.com/beaver71/Chart.PieceLabel.js并在切片之外获取标签,

DEMO

angular.module("app", ["chart.js"]).controller("ChartCtrl", function($scope) {

    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];

    $scope.data = [65, 59, 80, 81, 56, 55, 40];

    $scope.options = {
      pieceLabel: {
        render: 'label',
        fontColor: '#000',
        position: 'outside',
        segment: true
      }
    };

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.js"></script>
<script src="https://rawgit.com/beaver71/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>
<div ng-app="app" ng-controller="ChartCtrl">
  <canvas id="pie" class="chart chart-pie"
         chart-data="data" chart-labels="labels" chart-options="options">
  </canvas> 
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Chart.js v2.6:向饼图输出值添加箭头 的相关文章

  • PHP fscanf 与 fgets

    我可以使用读取一行中的整个字符串fgets but fscanf 没有这样做 根据PHP手册 fscanf 根据格式解析文件的输入 功能fscanf 类似于sscanf 但它从与句柄关联的文件中获取输入 并根据指定的格式解释输入 这在文档中
  • Javascript 根据字段值任意排序数组

    所以我有一个对象数组 如下所示 var myArray priority low priority critical priority high 我需要以这种方式排序 1 关键 2 高和3 低 如何才能做到这一点 我建议使用一个对象来存储排
  • 如何获取PHP版本?

    有没有办法检查从该脚本中执行特定脚本的 PHP 版本 例如 下面的代码片段 version way to get version print version 将在一台机器上打印 5 3 0 在另一台机器上打印 5 3 1 version p
  • 由带有换行符的 DOMDocument 生成的 XML

    我正在使用 PHP DOMDocument 创建 XML 文件 并且这些 XML 文件不能包含换行符 但是当我使用该方法时 保存 XML 生成的 XML 在定义和初始标记之间有一个换行符 如下所示
  • Google Maps JS Api - b.get 不是函数错误(isLocationOnEdge)

    我想检查我的路线上是否有标记 所以我尝试使用 isLocationOnEdge 但收到 TypeError b get 不是函数 错误 这是我的代码 我尝试了几次更改但无法解决问题 var directionsDisplay new goo
  • JQuery _renderItem 没有被调用

    我正在尝试使用 renderItem 函数创建自定义 ui menu item 元素 但经过可能尝试后 我什至无法调用该函数 自动完成功能正在工作 但就像 renderItem 函数不存在一样 这是我的脚本部分
  • PHP 将日期与今天的日期进行比较

    我正在尝试采用以下格式的信用卡到期日期mm yy并查看该日期是否已过 以便我知道信用卡是否已过期 如果已经过期 则一类expired被插入到 tr 我的代码结果检查了 05 16 的样本日期 并且脚本显示该卡尚未过期 而显然该卡已经使用了一
  • 如何混淆或使 JavaScript 文件不可读?

    我的应用程序中有 JavaScript 脚本 其中包含 JavaScript 和 jQuery 函数 所有用户与我的应用程序的交互都是动态的 并且通过 jQuery 传递到应用程序 我意识到 当我在客户端运行我的应用程序时 客户端可以通过查
  • 传单 - 导入 Geojson - Angular 6

    我尝试将 GeoJson 文件导入到 Angular 的应用程序 6 中的传单中 通过这个解决方案 我的 geojson 是在 leafletmap 中绘制的 但我有这个错误 我无法构建我的应用程序 有人知道一种解决方案吗 错误 TS234
  • Jest - 语法错误:无法在模块外部使用 import 语句

    我在用jest 24 9 0无需任何配置 从 create react app 全局安装 在这些文件中我使用 es6 模块 使用时没有报错 test react scripts test 但是当我开始使用时jest with test je
  • 自动调整元素 (div) 大小以适合水平内容

    我尝试谷歌搜索 但没有得到太多结果 我正在构建一个水平轮播 它在浮动的 LI 中显示图像 我想解决的问题是 每次我向轮播添加缩略图 我是延迟加载 时 我都需要重新计算轮播的宽度 以便所有浮动缩略图很好地并排排列 其一 我宁愿不必在 JS 中
  • html输入数字,min + step,使step忽略min?

    是否有可能使step忽略min属性
  • Niceedit本地上传图片失败

    我是这样称呼编辑的 new nicEditor buttonList bold italic underline upload iconsPath img nicedit png uploadURI http server com inte
  • Node.js - Async.js:并行执行如何工作?

    我想知道 async js 中并行执行是如何工作的 async require async async parallel function callback for var i 0 i lt 1000000000 i Do nothing
  • 如何让无限滚动发挥作用?

    我正在尝试让这个无限加载脚本在我的项目中工作 这是我的 HTML div div div class pagina div div class pagina div div class pagina div div class pagina
  • php平台安装询问我intl扩展,但似乎已经安装

    在 orocrm 安装期间 使用 symfony 2 开发的平台 我收到此错误 Fatal error Uncaught exception Symfony Component Intl Exception MethodArgumentVa
  • 如何在没有脚本 (PHP) 或服务器配置 (Nginx) 的情况下检测移动设备(和/或移动 cookie)?

    我们很快就会推出网站的移动版本 我们的完整网站和移动网站仅在主题上有所不同 即网址相同 唯一的区别在于前端 当用户访问我们的网站时 我们需要能够执行以下操作 1 检查 cookie 移动 true 或 false 以确定是否已定义完整与移动
  • 逻辑编程帮助

    A if infos 空和inputs empty 删除 B if infos空和inputs 空的 添加 C if infos 空和inputs 等于信息 添加 我们可以有这样的 if B it s the most common ope
  • 为什么对于整数键,“Map”操作比 JavaScript (v8) 中的“Object”慢得多?

    我很高兴使用Map对于在我的 JavaScript 代码库中随处访问的索引 但我刚刚偶然发现了这个基准 https stackoverflow com a 54385459 365104 https stackoverflow com a
  • 通过jquery ajax()和serialize()提交html表单

    我想通过 jquery ajax 提交此表单 这是我所做的 但它不起作用 即表单正在提交并刷新页面 但我没有看到响应 即在同一页面上打印数组 HTML

随机推荐

  • Java 中的 方法是什么?它可以被覆盖吗? [复制]

    这个问题在这里已经有答案了
  • 陷入 Matlab 的用于匹配 vlfeat 图像点的子图机制

    我正在 Matlab 中做 vlfeat 我正在关注这个问题here https stackoverflow com questions 1500498 how to use sift algorithm to compute how si
  • 获取EAX寄存器的上半部分

    在x86汇编语言中 有没有办法获得上半部分EAX登记 我知道AX寄存器已经包含了下半部分EAX注册 但我还不知道有什么方法可以获得上半部分 我知道mov bx ax会移动下半部分eax into bx 但我想知道如何移动上半部分eax in
  • 参数中的前向声明与“正常”前向声明之间的区别

    模板 参数中的前向声明 使用详细类型说明符 https en cppreference com w cpp language elaborated type specifier 和 正常 的前向声明 void foo struct bar
  • 音视频同步、TS MPEG2;H264/AVC、了解Handbrake中的PTS

    同步一直让我着迷 或者准确地说 为什么媒体播放器可以同步观看 ts 而重新组装的解复用音频 视频却不同步 所以我试图了解这一点 以及可以采取哪些措施来防止这种情况发生 我已阅读以下内容 https trac handbrake fr wik
  • 重用 Azure 服务总线中的连接

    我们在 Windows Azure 上以 Web 角色托管了一个 API 该 API 具有 2 个实例 用于接收请求 验证它们 然后将它们添加到 Azure 服务总线队列 最近我们开始对此进行负载测试 发现我们当前的代码抛出以下异常 无法将
  • Silverlight 工具包;饼图颜色

    我有一个巨大的问题无法解决 假设我有五种不同的水果 我希望每种水果都与某种颜色相关联 假设我有三个 篮子 其中包含零个或多个上述水果 当我为我的三个篮子制作饼图时 每个楔形只是一些随机颜色 大概是由控件选择的 我该怎么说 将图表中的蓝莓 香
  • Craco 无法与 [email protected] 正常工作

    将react scripts升级到v5后 craco start不能正常工作 应用程序启动时没有错误 但在浏览器中 有一个空白页面 如果我打开检查器 我只能看到 index html 代码而不是反应代码 它运作良好 电子邮件受保护 cdn
  • 比较 python 中的旋转列表

    我试图比较两个列表以确定一个列表是否是另一个列表的旋转 循环排列 例如 a 1 2 3 b 1 2 3 or 2 3 1 or 3 1 2 都是匹配的 而 b 3 2 1 is not 为此 我有以下代码 def matching list
  • java中ThreadPool的编号

    您好 我在一个函数中使用带有两个线程的线程池 该函数由多个客户端以同步方式调用 在我正在使用的那个函数中 ExecutorService executor Executors newFixedThreadPool 2 完成任务后我将关闭执行
  • 如何从 django-celery 3 任务发送通道 2.x 组消息?

    我需要推迟发送频道消息 这是我的代码 consumers py class ChatConsumer WebsocketConsumer def chat message self event self send text data jso
  • 使用 JNA 聚焦外部窗口(shell)

    我想使用知道 xterm 标题的 JNA 或 JNI 将焦点集中在 xterm 上 目前我正在使用 xdotools 进行此操作 但我想更改为纯 Java 是否可以 如何 注意 我使用的是ubuntu 11 10 None
  • 虚拟下游设备的 Azure IoT Edge 模块身份转换

    我有以下设置 多个 Modbus 传感器 1 通过 ModbusTCP 连接到这些传感器的网关 在此网关上 一个 Azure IoT Edge 模块正在运行 使用 NodeJS SDK 该模块读取每个连接的传感器的所有值 用于设备管理的 A
  • 是否可以在python中的字典末尾添加

    当我引入新的对时 它被插入到字典的开头 可以在最后追加吗 UPDATE 从 Python 3 7 开始 字典记住插入顺序 https stackoverflow com a 39980744 1258041 通过简单地添加一个新值 您可以确
  • Android Chronometer 从定义的值开始

    我有一个应用程序 在其中向用户显示他正在做的事情的计时器 每当活动进入后台 无论是通过主页按钮还是返回 时 我都会保存该时间 以秒为单位 当活动返回时 我想继续从同一时间运行计时器 用户可能会从列表中选择不同的项目 时间也会不同 而且他可能
  • 使用arduinoEDK通过esp8266调用nest api

    我正在尝试使用 ESP8266 和 Arduino EDK 连接到 Nest API 恒温器 但至今还没有结果 我以前见过有人在这里问过同样的问题 但他的问题的答案对我没有帮助 这是我的代码 Code include
  • Java 连接池最佳实践?

    在厌倦了 c3p0 的持续锁定后 我转向 BoneCP 为我的数据库寻找替代连接池 我有一个服务器应用程序 每分钟处理大约 7 000 个项目 并且需要将这些项目记录到我们的 MySQL 数据库中 我目前有 100 个工作线程 并像这样设置
  • 如何从 CI/CD 管道监控 adf 管道

    我有一个 CD 管道 它会触发 azure 数据工厂 adf 管道 但它 CD 管道 不会等到 adf 管道完成才继续执行下一个任务 我想知道 CD 管道中是否有任何内置功能 我可以通过它们触发和监视 adf 管道 因此 我期望的结果是 C
  • 如何在 gettext .po 文件中指定有序变量?

    我有一个多语言站点 它使用 Zend Translate PHP 数组来处理翻译 它工作正常 但我正在尝试转换为使用 gettext 因为它提供了额外的功能 然而 我还没有发现 gettext 相当于我在 PHP 数组翻译中喜欢的功能 n
  • Chart.js v2.6:向饼图输出值添加箭头

    我正在使用 Chart js v2 6 输出饼图 数据是从MySQL数据库中获取的 图表渲染正确 但我需要向数据值添加箭头 如下面的屏幕截图所示 带箭头的饼图示例 下面是我使用 Chart js 输出饼图的代码 var chartdata