饼图.js-显示所有3个分段边界

Question

我有一个饼图chart.js的边框设置为1。

显示图表时，每个细分市场不会显示其3个边框。

我认为该边框存在，但是下一段应用于左边框的顶部-隐藏了显示的左边框。

是否存在将显示每个饼图段的所有3个边框的设置？

这是我的代码

new Chart(document.getElementById('example-pie-chart-1'), {
  type: 'pie',
  data: {
    labels: [
      '{% blocktrans %}Views{% endblocktrans %}',
      '{% blocktrans %}Print Requests{% endblocktrans %}',
      '{% blocktrans %}PDF Downloads{% endblocktrans %}',
      '{% blocktrans %}DOCX Downloads{% endblocktrans %}',
    ],
    datasets: [{
      backgroundColor: [
        'rgba(71, 101, 160, 0.3)', // #4765a0.
        'rgba(0, 0, 0, 0.3)', // #000000.
        'rgba(52, 137, 219, 0.3)', // #3489db.
        'rgba(179, 179, 179, 0.3)', // #b3b3b3.
      ],
      hoverBackgroundColor: [
        'rgba(71, 101, 160, 0.6)', // #4765a0.
        'rgba(0, 0, 0, 0.6)', // #000000.
        'rgba(52, 137, 219, 0.6)', // #3489db.
        'rgba(179, 179, 179, 0.6)', // #b3b3b3.
      ],
      borderColor: [
        'rgba(71, 101, 160, 1)', // #4765a0.
        'rgba(0, 0, 0, 1)', // #000000.
        'rgba(52, 137, 219, 1)', // #3489db.
        'rgba(179, 179, 179, 1)', // #b3b3b3.
      ],
      data: [6, 3, 2, 2]
    }]
  },
  options: {
    title: {
      display: false,
      text: '{% blocktrans %}Overall Statistics{% endblocktrans %}'
    }
  }
});

<canvas id="example-pie-chart-1" width="200" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

Answer 1

使用 borderAlign: "inner"

https://www.chartjs.org/docs/latest/charts/doughnut.html

new Chart(document.getElementById('example-pie-chart-1'), {
  type: 'pie',
  data: {
    labels: [
      '{% blocktrans %}Views{% endblocktrans %}',
      '{% blocktrans %}Print Requests{% endblocktrans %}',
      '{% blocktrans %}PDF Downloads{% endblocktrans %}',
      '{% blocktrans %}DOCX Downloads{% endblocktrans %}',
    ],
    datasets: [{
      backgroundColor: [
        'rgba(71, 101, 160, 0.3)', // #4765a0.
        'rgba(0, 0, 0, 0.3)', // #000000.
        'rgba(52, 137, 219, 0.3)', // #3489db.
        'rgba(179, 179, 179, 0.3)', // #b3b3b3.
      ],
      hoverBackgroundColor: [
        'rgba(71, 101, 160, 0.6)', // #4765a0.
        'rgba(0, 0, 0, 0.6)', // #000000.
        'rgba(52, 137, 219, 0.6)', // #3489db.
        'rgba(179, 179, 179, 0.6)', // #b3b3b3.
      ],
      borderColor: [
        'rgba(71, 101, 160, 1)', // #4765a0.
        'rgba(0, 0, 0, 1)', // #000000.
        'rgba(52, 137, 219, 1)', // #3489db.
        'rgba(179, 179, 179, 1)', // #b3b3b3.
      ],
      borderAlign: "inner",
      data: [6, 3, 2, 2]
    }]
  },
  options: {
    title: {
      display: false,
      text: '{% blocktrans %}Overall Statistics{% endblocktrans %}'
    }
  }
});

<canvas id="example-pie-chart-1" width="200" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>