插入百分比图表.js甜甜圈。

Question

插入百分比图表.js甜甜圈。

10

我正在使用charts.js库，并想知道如何向甜甜圈图表的孔中添加一些标记（例如百分比）。

输入图像描述

我的JavaScript代码:

 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>

- Buendiadas

4个回答

1

Draw方法创建了图表的画布。悬停时，将调用draw方法重新创建图表并显示工具提示。文本消失是因为在draw方法内没有显示文本的代码，因为我们手动在API外添加了文本。

您可以通过扩展图表来实现此目的。请参阅这里的文档。

以下是在圆环图表中心添加总记录示例。

Chart.defaults.derivedDoughnut = Chart.defaults.doughnut;
var customDoughnut = Chart.controllers.doughnut.extend({
  draw: function(ease) {
    Chart.controllers.doughnut.prototype.draw.apply(this, [ease]);
    var width = this.chart.chart.width,
      height = this.chart.chart.height;
    var total = this.getMeta().total;
    var fontSize = (height / 114).toFixed(2);
    var ctx = this.chart.chart.ctx;
    ctx.font = fontSize + "em Verdana";
    ctx.textBaseline = "middle";
    var text = total,
      textX = Math.round((width - ctx.measureText(text).width) / 2),
      textY = height / 2;

    ctx.fillText(text, textX, textY);
  }
});
Chart.controllers.derivedDoughnut = customDoughnut;

例子：jsfiddle

- Debasis Panda

谢谢，真是个出色的解决方案！ - Sunny Soni

1

我认为已被接受的答案对我来说并不起作用。这是我的解决方案：

let canvas = document.getElementById('chart-area');
let ctx = canvas.getContext('2d');
let perc = 25;

const config = {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [
                perc,
                100-perc
            ],
            backgroundColor: [
                window.chartColors.green,
                window.chartColors.gray
            ]
        }]
    },
    options: {
        responsive: true,
        animation: {
            animateScale: true,
            animateRotate: true,
            onComplete : function() {
                var cx = canvas.width / 2;
                var cy = canvas.height / 2;
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.font = '16px verdana';
                ctx.fillStyle = 'black';
                ctx.fillText(perc+"%", cx, cy);
            }
        },
    }
};

new Chart(ctx, config);

- Victor

0

一种纯CSS的解决方案

.overview-total {
  position: relative;

  .overview-num{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

HTML

<div class="overview-total">
   <span class="overview-num">140</span>
   <canvas baseChart class="chart-size" width="300" height="180"
                      [plugins]="doughnutChartPluginsSo"
                      [colors]="doughnutChartColorsSo"
                      [data]="doughnutChartDataSo"
                      [labels]="doughnutChartLabelsSo"
                      [chartType]="doughnutChartTypeSo"
                      [options]="doughnutChartOptionsSo"></canvas>
</div>

- Awais

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- markE · Accepted Answer

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

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

然后，您可以告诉画布在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>