ChartJS V3 borderRadius 仅适用于顶部

Question

为什么 borderRadius 只在顶部起作用？

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <div>
    <canvas id="canvas" height="100"></canvas>
  </div>

JS

window.onload = function() {
      var ctx = document.getElementById('canvas').getContext('2d');
      window.myBar = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ["Q0", "Q1", "Q2", "Q3", "Q4"],
          datasets: [{
            label: 'estimate',
            data: [[2, 7], [2, 10], [1, 3], [1, 4], [4, 8]],
            backgroundColor: 'lightblue',
            borderRadius: 10,
          },
          {
            label: 'actual',
            data: [[5, 6], [7, 8], [2, 3], [2, 3], [7, 8]],
            backgroundColor: 'red',
            borderRadius: 10,
         }]
 },
 
 
        options: {
          responsive: true,
          legend: {
            position: 'top',
          },
          title: {
            display: true,
            text: 'Estimate Histoy'
          }
        }
      });
    }

;

我已经找了几天了。发现很多 pre-V3 相当复杂，但与 V3 无关。看起来相当直截了当。我确实看到如果底部在轴上，它不会放置 borderRadius。

感谢您的帮助。

Answer 1

如果您希望所有边框都有 borderRadius，您需要在数据集中指定 borderSkipped: false

ChartJS V3 borderRadius 仅适用于顶部

ChartJS V3 borderRadius only works on top

chart.js

border-radius