当所有图例都隐藏时，如何从Chart.js饼图中删除白色边框？

Question

当带边框的chart.js饼图(v2.5.0)中的所有图例都被隐藏时。将保留一条线(边框)。有没有办法在禁用所有图例的情况下删除边框或清除饼图？

当所有图例都隐藏时，尝试在图例上单击How can I remove the white border from Chart.js pie chart?，但它仅在下一次事件更改后才在渲染中反映。

when all legends are visible

When all legends are hidden

Answer 1

这在版本3.2.0 (最新)中不是问题。

​

const data = {
  labels: [ 'Red', 'Blue', 'Yellow' ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};

const config = { type: 'pie', data };

new Chart(document.getElementById('myChart'), config);

.chart-container {
  width: 200px;
  height: 200px;
  background: #444;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>

​

以下是2.5.0版本中与您的问题等效的版本：

​

const data = {
  labels: [ 'Red', 'Blue', 'Yellow' ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};

const config = { type: 'pie', data };

new Chart(document.getElementById('myChart'), config);

.chart-container {
  width: 200px;
  height: 200px;
  background: #444;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>

​

Answer 2

通过将borderWidth: 0添加到数据集配置，您可以移除白色边框

示例：

const data = {
  labels: [ 'Red', 'Blue', 'Yellow' ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4,
    borderWidth: 0
  }]
};

const config = { type: 'pie', data };

new Chart(document.getElementById('myChart'), config);

.chart-container {
  width: 200px;
  height: 200px;
  background: #444;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>

​