如何在悬停的甜甜圈chartjs中缩放扇区? [英] How scale sector in doughnut chartjs on hover?

问题描述

如何在悬停的甜甜圈chartjs中缩放扇区?例子:

How scale sector in doughnut chartjs on hover? Example:

推荐答案

最简单的解决方案是在数据集上定义不同的 borderWidth 和 hoverBorderWidth .

The simplest solution would be to define different borderWidth and hoverBorderWidth on your dataset as follows.

new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  data: {
    labels: ['red', 'green', 'gray', 'blue'],
    datasets: [{
      label: 'My First dataset',
      backgroundColor: ['red', 'green', 'gray', 'blue'],
      borderColor: 'white',
      data: [3, 4, 5, 3],
      borderWidth: 4,
      hoverBorderWidth: 0,
      borderAlign: 'center'
    }]
  },
  options: {
     responsive:true,
     cutoutPercentage: 65
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

这篇关于如何在悬停的甜甜圈chartjs中缩放扇区?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！