时间戳

首页 > 解决方案 > Pie chart.js - 显示所有 3 个段边框

javascript - Pie chart.js - 显示所有 3 个段边框

问题描述

我有一个 pie 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>

标签： javascripthtmlchart.js

解决方案

利用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>

推荐阅读