Question

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

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

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

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

这是我的代码

Comparable

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 %}'
    }
  }
});

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>

Answer 2

经过研究，我发现边界实际上彼此重叠。

在这里，首先绘制饼图的第一片。因此，其所有边框都由您提供的颜色着色。然后以相同方式绘制第二个切片。

由于这两个切片边界之间没有没有距离，因此第二个切片的右侧边界与重叠了。

此过程一直持续到绘制最后一个切片为止。绘制最后一个切片时，其左边界与倒数第二个切片的右边界重叠，然后其右边界与第一个切片的左边界重叠。

因此，我们只能看到第一个切片的一个边框，最后一个切片的三个边框和其他切片的两个边框正确着色。

是否有上述说明的证明？
好吧，根据我的假设，可以通过在切片之间添加空间来解决此问题，以使一个边界不能与其他边界重叠。但是我找不到在饼图切片之间添加空格的任何方法。但是，我在this issue中有一个例子。在此示例中，如果单击切片，则切片会变大。我已经附上了下面的代码。当切片变大时，我们可以看到三个边界与我们提供的颜色相同。因此，实际上是由于边框重叠而发生的。
这是现场演示：

var selectedIndex = null;
var myChart = 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 %}'
    },
    onClick: function(evt, elements) {
      if (elements && elements.length) {
        var segment = elements[0];
        myChart.update();
        if (selectedIndex !== segment["_index"]) {
          selectedIndex = segment["_index"];
          segment._model.outerRadius += 30;
        } else {
          selectedIndex = null;
        }
      }
    }
  }
});

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

所以，有两个选项可供您选择-

分析chart.js的源代码。并调整实现以解决问题
为their GitHub repository创建新问题

希望，这会有所帮助。谢谢！

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

2 个答案: