angular - 圆环图，在某些情况下如果数量为 1，它的显示没有背景颜色，但在悬停时颜色显示正确

问题描述

我在 chartjs 中有一个圆环图，有 5 种数据类型。即“逾期”、“等待我签字”、“等待合作伙伴签字”、“进行中”和“待处理”。它具有相应的值 112、140、35、3 和 1，背景颜色为 #FF4657"、"#FFD336"、"#00DCFF"、"#00C597" 和"#0062FF"。在这种情况下，当我生成图表时值为 1 的待处理数据显示没有任何背景颜色。但有趣的是，在以正确颜色悬停其显示时

labels = ["Overdue", "Waiting for me to sign", "Waiting for partner to sign", "In progress", "Pending"];
backgroundColor = ["#FF4657", "#FFD336", "#00DCFF", "#00C597", "#0062FF"];
data = [ 112, 140, 35, 3, 1];

这是给我这个问题的数据比例。这是图像

当我放大我得到这个时，你可以在那里看到一条狭窄的蓝线任何帮助将不胜感激

标签： angularchart.js

边界被绘制在所有的弧上，所以因为这个值与其他值相比非常小，它已经有一个很低的百分比并且在它上面绘制了边界，它变成了像素工作，它不能小到 1 个像素因此它将开始在其上绘制边框。

因此，您可以将 borderWidth 设置为 0 或在可视化数据之前检查数据，并删除任何太小以至于无法正确可视化的数据。

var options = {
  type: 'doughnut',
  data: {
    labels: ["Overdue", "Waiting for me to sign", "Waiting for partner to sign", "In progress", "Pending"],
    datasets: [{
      backgroundColor: ["#FF4657", "#FFD336", "#00DCFF", "#00C597", "#0062FF"],
      data: [112, 140, 35, 3, 1],
      borderWidth: 0
    }]
  },
  options: {
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

body {
  max-width: 37%;
}

<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

angular - 圆环图，在某些情况下如果数量为 1，它的显示没有背景颜色，但在悬停时颜色显示正确

问题描述

解决方案

推荐阅读