使用Chart.js制作圆角环形图并实现百分比居中显示的咨询

解决方案 #

你只需要修改少量HTML和加一段简单的CSS就能实现效果，不需要改动复杂的Chart.js自定义逻辑，完全匹配你当前的学习阶段：

1. 修正HTML代码 #

现有HTML存在两个问题：

• 重复定义了id为openedCanvas的canvas元素，同一页面id必须唯一，删除body末尾多余的canvas即可
• 资源引入顺序错误，jQuery需要放在Chart.js之前加载，否则JS代码里的$选择器会报错

修改后的完整HTML如下：

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/common.css">
  <!-- 调整引入顺序，先引jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
  <title>Document</title>
  <!-- 下面的CSS也可以直接写到common.css文件里 -->
  <style>
    .chart-canvas {
      position: relative;
      width: 280px; /* 可以自己调整图表大小 */
      height: 280px;
    }
    #openedCanvas {
      width: 100%;
      height: 100%;
    }
    .chart-unique-value {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 42px;
      font-weight: bold;
      color: #3ec556;
    }
  </style>
</head>
<body>
  <div class="modal-div-canvas js-chart">
    <div class="chart-canvas">
      <canvas id="openedCanvas"></canvas>
      <div class="chart-background"></div>
      <span class="chart-unique-value">
        <span class="js-count">70</span>
        <span class="cuv-percent">%</span>
      </span>
    </div>
  </div>
  <!-- 把你的JS代码直接写到这里或者mychart.js里都可以 -->
  <script src="mychart.js"></script>
</body>
</html>

2. JS代码可选调整 #

你当前JS里配置的图表进度是70%，页面上写的百分比是85%，如果需要保持一致，直接把HTML里的js-count里的数字改成70即可，不需要改动其他Chart相关的逻辑。

如果需要后续动态同步JS和显示的百分比，只需要在JS最后加一行代码就行：

// 加到现有JS代码的最后面
$('.js-count').text(deliveredData.datasets[0].data[0])

内容的提问来源于stack exchange，提问作者이하영