时间戳

首页 > 解决方案 > 如何使用 Chart.js 版本 3.2.1 在圆环图中添加文本

javascript - 如何使用 Chart.js 版本 3.2.1 在圆环图中添加文本

问题描述

  1. 我在使用 Canvas 的 HTML 中使用，如何使用在甜甜圈图中添加文本。这是我的 javascript 代码和 HTML 代码。我使用了chart js 3.2.1版，所以请给出相同版本（3）的解决方案。

var overallStatsCanvasCtx = document.getElementById('pademicOverallStats');
var dataPandemicEmp = {
    labels: ['Normal', 'No Mask', 'Warning', 'High Temperature'],
    datasets: [{
        label: "Overall Statistics",
        data: ['4000', '2000', '1500', '2500'],
        backgroundColor: ['#43C187', '#8FC3F0', '#FFCD5E', '#FF4800'],

    }]
};
var overallStatschartOptions = {
    responsive: true,
    plugins: {
        legend: {
            display: true,
            align: 'center',
            position: 'bottom',
            labels: {

                fontColor: '#474B4F',
                usePointStyle: true,

            }
        }
    },
};
var doughnutChart = new Chart(overallStatsCanvasCtx, {
    type: 'doughnut',
    data: dataPandemicEmp,
    options: overallStatschartOptions,


});
<canvas id="pademicOverallStats"></canvas>

标签： javascriptchart.js

解决方案

您将不得不为此使用自定义插件

var data = {
  labels: [
    "Red",
    "Blue",
    "Yellow"
  ],
  datasets: [{
    data: [300, 50, 100],
    backgroundColor: [
      "#FF6384",
      "#36A2EB",
      "#FFCE56"
    ],
    hoverBackgroundColor: [
      "#FF6384",
      "#36A2EB",
      "#FFCE56"
    ]
  }]
};

var promisedDeliveryChart = new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  data: data,
  options: {
    responsive: true,
    plugins: {
      legend: {
        display: false
      }
    }
  },
  plugins: [{
    id: 'text',
    beforeDraw: function(chart, a, b) {
      var width = chart.width,
        height = chart.height,
        ctx = chart.ctx;

      ctx.restore();
      var fontSize = (height / 114).toFixed(2);
      ctx.font = fontSize + "em sans-serif";
      ctx.textBaseline = "middle";

      var text = "75%",
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

      ctx.fillText(text, textX, textY);
      ctx.save();
    }
  }]
});
<body>
  <canvas id="myChart"></canvas>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.0/dist/chart.min.js"></script>
</body>

推荐阅读