我正在尝试创建一个自定义外观的圆环图使用图表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);
1条答案
按热度按时间gv8xihay1#
spacing: -50
属性导致了这种情况,因为间距是负的,条的尖端与下一个条的末端重叠,当你放置一个值比其他条高得多的条时,它会与所有其他条重叠。我们可以通过删除border-radius
来更好地观察这种行为:因此,解决方案是调整
spacing
属性的值,以防数据数组中的某个值比其他值高出太多,如我们所见: