程序员经验分享-hwhale

插入百分比 Charts.js 甜甜圈

2024-03-10

我正在使用 Charts.js 库，想知道如何在圆环图的孔中添加一些标记（比如百分比）-

My js 

 jQuery(document).ready(function(){

var data = [
            {
                value: 5,
                color:"#A1638C",
                highlight: "#BF7AAF",
                label: "Días Completados 1/21"
            },
            {
                value: 95,
                color: "#07659A",
                highlight: "#4190BA",
                label: "Días pendientes 20/21"
            },

        ]


 var ctx = jQuery("#myChart").get(0).getContext("2d");
 var myDoughnutChart = new Chart(ctx).Doughnut(data);





});

我的画布：

<canvas id="myChart" width="264px"></canvas>

圆环图位于画布的中心，因此您可以像这样计算圆环图的中心：

// get the canvas element and its context
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");

// calculate the center of the canvas (cx,cy)
var cx=canvas.width/2;
var cy=canvas.height/2;

然后你可以告诉canvas以cx，cy为中心垂直和水平绘制文本，如下所示：

// horizontally align text around the specified point (cx)
ctx.textAlign='center';

// vertically align text around the specified point (cy)
ctx.textBaseline='middle';

// draw the text
ctx.font='14px verdana';
ctx.fillStyle='black';
ctx.fillText("Text Here",cx,cy);

但在绘制居中文本之前，您必须等待所有动画完成。

为此，您必须告诉 ChartJS 您希望在动画完成时触发回调函数。您可以通过设置回调来设置onAnimationComplete图表选项的属性：

var myDoughnutChart = new Chart(ctx).Doughnut(data, {
    responsive : true,

    // when ChartJS has completed all animations then call the addText function
    onAnimationComplete: addText
});

这是一个将所有内容组合在一起的演示：

var doughnutData = [{
    value: 300,
    color: "#F7464A",
    highlight: "#FF5A5E",
    label: "Red"
  }, {
    value: 50,
    color: "#46BFBD",
    highlight: "#5AD3D1",
    label: "Green"
  }, {
    value: 100,
    color: "#FDB45C",
    highlight: "#FFC870",
    label: "Yellow"
  }, {
    value: 40,
    color: "#949FB1",
    highlight: "#A8B3C5",
    label: "Grey"
  }, {
    value: 120,
    color: "#4D5360",
    highlight: "#616774",
    label: "Dark Grey"
  }

];

window.onload = function() {
  var canvas = document.getElementById("chart-area");
  var ctx = document.getElementById("chart-area").getContext("2d");
  window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
    responsive: true,
    onAnimationComplete: addText
  });

};

var myDoughnutChart = new Chart(ctx).Doughnut(data);
var myDoughnutChart = new Chart(ctx).Doughnut(doughnutData, {
  responsive: true,
  onAnimationComplete: addText
});


function addText() {

  var canvas = document.getElementById("chart-area");
  var ctx = document.getElementById("chart-area").getContext("2d");

  var cx = canvas.width / 2;
  var cy = canvas.height / 2;

  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.font = '14px verdana';
  ctx.fillStyle = 'black';
  ctx.fillText("Text Here", cx, cy);

}
body {
  padding: 10px;
  margin: 0;
}
#canvas-holder {
  width: 30%;
}
canvas {
  border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<div id="canvas-holder">
  <canvas id="chart-area" width="500" height="500" />
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

canvas

charts

chartjs

插入百分比 Charts.js 甜甜圈 的相关文章

随机推荐

  • std::tuple 与 std::array 作为 std::vector 的项

    我有这样一个案例 std vector lt 4 integers gt v 什么最适合这里 std tuple解决方案 std vector

  • JIT 编译器在角度更新后不可用

    我已经从 Angular 更新了 Angular 应用程序10到有角度的12 更新开发模式后工作正常 但在生产构建中我得到了 JIT compiler unavailable 错误 我已经进口了 angular compiler 在里面ma

  • xpath 在 div 元素中查找伪元素 ::after 且不带任何内容

    我正在尝试编写 xpath 来查找是否选中了一个复选框 该复选框正在使用 css after 元素进行更改 以下是我拥有的两个元素 div class FormBlock formItem2 and text Scoped In div c

  • 如何在 numpy Python 中启用和禁用 Intel MKL？

    我想测试和比较使用英特尔 MKL 和不使用英特尔 MKL 的 Numpy 矩阵乘法和特征分解性能 我已经使用安装了 MKLpip install mkl Windows 10 64 位 Python 3 8 然后我使用了来自的例子here

  • 范围内的最低值

    我想找到某个范围内的最低值 我每次都必须迭代数组还是有任何动态方法 假设我有输入数组 index 0 1 2 3 4 5 6 7 value 1 4 6 1 6 7 2 3 然后我必须选择范围 包括 中最小的 例如 min 0 7 1 mi

  • 将 MathML 复制到 Word 中以用作方程

    我可以成功地将使用 MS Word 2013 中的插入方程工具创建的方程以 MathML 格式复制到剪贴板 以便在其他地方使用 不过我主要需要导入到Word中 有没有办法将MathML格式的方程导入到word中作为方程使用 您是否刚刚尝试粘

  • 当我将 FusionTablesLayer 与 Google Maps JavaScript API v3 结合使用时出现空白页

    我使用融合表的数据准备了一个简单的页面 FusionTablesLayer 与 Google Maps JavaScript API v3 但不显示地图 您可以在此处查看该页面 http www siterary com 0test htm

  • Xamarin Forms 图像大小不匹配

    我正在使用 Xamarin Forms 实现一个跨平台应用程序 但我遇到了一个奇怪的错误 我正在尝试创建一个带有文本的按钮 为了实现它 我正在使用AbsoluteLayout 我已为每种 iOS 分辨率类型 png 2x png 3x pn

  • System.InvalidCastException：对象无法从 DBNull 转换为其他类型

    我的代码中有一个例外 我已经尝试将 int64 更改为 int32 但这并没有改变它 在数据库中 表示 column ID 的单元格的数据类型为 NUMBER 问题出在这段代码的第 7 行 private void dataGridView

  • 如何将 numpy.array 作为新列添加到 pyspark.SQL DataFrame 中？

    这是创建 pyspark sql DataFrame 的代码 import numpy as np import pandas as pd from pyspark import SparkContext from pyspark sql

  • 如何使 geom_line 和 geom_point 抖动相同的幅度？

    我有一个ggplot2具有显着重叠的两条线的折线图 我正在尝试使用position jitterdodge 这样它们就更明显了 但我无法以相同的方式让线条和点都抖动 我试图仅水平抖动点和线 因为我不想建议 y 轴上的任何更改 这是一个 MW

  • JQuery 选择框和循环帮助

    谢谢阅读 我对 jQuery 有点陌生 我正在尝试制作一个可以包含在我所有网站中的脚本来解决一个总是让我发疯的问题 问题 带有长选项的选择框在 Internet Explorer 中会被截断 例如 这些选择框 http discoverfi

  • glReadPixels 总是在 glClearColor 中返回相同的值

    我一直在努力理解 glReadPixels 的输出 它在理论上似乎很简单 但实际上产生了令人费解的结果 至少对我来说 假设我有一个简单的片段着色器 它绘制一个颜色值为 vec4 0 2 0 0 0 的三角形 而背景颜色设置为 0 3 1 0

  • 如何在 Vim 中根据光标下的字符在函数中执行某些操作？

    我正在编写一个在 LaTeX 中编辑特定环境的函数 环境基本上是这样的 begin quicktikz some stuff end quicktikz 或者像这样 begin quicktikz some stuff end quickt

  • Py3k 和 IPython

    我正在升级到 Python 3 但似乎找不到它的 IPython 版本 主要的IPython发布页面 http ipython scipy org moin Download没有列出任何合适的内容 任何让 IPython 为 Py3k 工作

  • 如何编写单元测试？

    我有一个Java课程 我怎么能够单元测试 http en wikipedia org wiki Unit testing it 就我而言 我让类进行二进制求和 需要两个byte 数组 对它们求和 然后返回一个新的二进制数组 我为两者提供这篇

  • 在实体框架迁移期间读取数据库（选择查询）

    我知道我可以使用Sql方法在迁移期间更新数据 对于可以用纯 SQL 表达的简单事物非常有用 我也知道我可以使用Seed方法 但这感觉就像一个黑客 我想编写的代码必须在执行迁移时执行一次 在我当前的情况下 我需要从列中删除 HTML 标签 并

  • 学习 Java：如何为 System.out.println() 创建短别名

    我想为其创建别名或扩展版本System out println 用于打印我的各种类型的变量 如何将未知类型 类的参数传递给方法 public static void p VariableType args System out printl

  • React Router - 在新选项卡上打开链接并重定向到主页

    使用 React Router 4 2 我的尝试是open单击导航链接后会出现一个新选项卡 同时重定向到网站主页 即 导航栏 单击 策略 即使下面的代码的行为符合上述要求 这是明智的方法吗 旨在学习 Routes js 上的最佳实践 Rou

  • 插入百分比 Charts.js 甜甜圈

    我正在使用 Charts js 库 想知道如何在圆环图的孔中添加一些标记 比如百分比 My js jQuery document ready function var data value 5 color A1638C highlight

热门标签