插入百分比charts.js甜甜圈 [英] Inserting percentage charts.js doughnut

问题描述

我是，使用charts.js图书馆，并想知道如何添加一些标记在一个甜甜圈图表的洞（sth像一个百分比） -

My js

  jQuery（document）.ready（function（）{
 
 var data = [
 {
 value：5，
 color：＃A1638C，
 highlight：＃BF7AAF，
 label：DíasCompletados 1/21
} 
 {
 value：95，
 color：＃07659A，
 highlight：＃4190BA，
 label：Díaspendientes 20/21
}，
 
] 
 
 
 var ctx = jQuery（＃myChart）。get（0）.getContext（2d）; 
 var myDoughnutChart = new Chart（ctx）.Doughnut（data）; 
 
 
 
 
 
}）; 
  

我的画布：

 < canvas id =myChartwidth =264px>< / canvas> 
  

解决方案

圆环图在画布中居中，因此您可以计算中心这个甜甜圈就像这样：

  //获取canvas元素及其上下文
 var canvas = document.getElementById myChart）; 
 var ctx = canvas.getContext（2d）; 
 
 //计算画布的中心（cx，cy）
 var cx = canvas.width / 2; 
 var cy = canvas.height / 2; 
  

然后你可以告诉canvas垂直绘制文本，水平居中在cx，cy像这样：

  //水平对齐指定点周围的文本（cx）
 ctx .textAlign ='center'; 
 
 //垂直对齐指定点周围的文本（cy）
 ctx.textBaseline ='middle'; 
 
 //绘制文本
 ctx.font ='14px verdana'; 
 ctx.fillStyle ='black'; 
 ctx.fillText（Text Here，cx，cy）; 
  

但您必须等待任何动画完成，然后再绘制居中文字。

为了做到这一点，你必须告诉ChartJS你想要一个回调函数触发，当它完成动画。您可以通过设置图表选项的 onAnimationComplete 属性来设置回调：

  var myDoughnutChart = new Chart（ctx）.Doughnut（data，{
 responsive：true，
 
 //当ChartJS完成所有动画后，调用addText函数
 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：Gray}，{value：120，color：＃4D5360 ：＃616774，label：Dark Gray}]; 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）。 Donut（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-areawidth =500height =500/>< / div>   
i'm, using charts.js librarie and would like to know how could I add some mark to the hole of a doughnut chart (sth like a percentage)- 



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);





});
My canvas:
<canvas id="myChart" width="264px"></canvas>

解决方案


The donut chart is centered in the canvas, so you can calculate the center of the donut like this:
// 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;
Then you can tell canvas to draw text vertically & horizontally centered around cx,cy like this:
// 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);
But you must wait for any animations to complete before drawing your centered text.

To do that you must tell ChartJS that you want a callback function triggered when it completes its animation. You can set the callback by setting the onAnimationComplete property of the chart options:
var myDoughnutChart = new Chart(ctx).Doughnut(data, {
    responsive : true,

    // when ChartJS has completed all animations then call the addText function
    onAnimationComplete: addText
});
Here's a demo putting it all together:



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>





                        
这篇关于插入百分比charts.js甜甜圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！