处理值的巨大差异时,Chart Js圆环图中断

rdlzhqv9  于 2023-03-12  发布在  Chart.js
关注(0)|答案(1)|浏览(162)

我正在尝试创建一个自定义外观的圆环图使用图表js.

当数据值彼此接近时,我的代码(fiddle)工作正常,但当尝试处理值远大于其他值的数据时,图表中断,broken fiddle

我不明白为什么会发生这种情况,我认为这与弧间距和半径有关,但我不知道如何处理它,并仍然使其看起来像我所需要的
代码

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0/dist/chart.js"></script>

<canvas id="myChart" width="200" height="200"></canvas>
let color1 = '#98A3CC';
let color2 = '#6475B2';
let hoverColor="#283F94";
var options = {
  type: 'doughnut',
  data: {
    labels: ["One", "Two", "Three", "Four"],
    datasets: [{
      label: '# of Votes',
      data: [3956745.7,5400,4086.06,50000],
      backgroundColor: [
      color1, color2, color1, color2],
      hoverBackgroundColor: new Array(4).fill(hoverColor),
    }]
  },
  options: {
    cutout: '90%',
    radius: '90%',
    //hover: {mode: null},
    plugins: {
      legend: {
        display: false
      }
    },
    elements: {
      arc: {
        spacing: -50,
        borderRadius: 15
      }
    }
  }
}
var chartInstance = new Chart(document.getElementById("myChart"), options);
gv8xihay

gv8xihay1#

spacing: -50属性导致了这种情况,因为间距是负的,条的尖端与下一个条的末端重叠,当你放置一个值比其他条高得多的条时,它会与所有其他条重叠。我们可以通过删除border-radius来更好地观察这种行为:

因此,解决方案是调整spacing属性的值,以防数据数组中的某个值比其他值高出太多,如我们所见:

相关问题