我是 apexcharts 的新手,无法弄清楚如何删除此径向条形图中的多余空间。
我想拥有与我创建的相同类型的甜甜圈图,但周围没有额外的空间。
我的代码有 Javascript 和 HTML:
正如您在“图表:”中看到的那样,设置了高度,但我仍然得到了空格
var options = {
chart: {
height:140,
width:100,
type: 'radialBar',
offsetY: 0,
toolbar: {
show: false
}
},
plotOptions: {
radialBar: {
size:50,
hollow: {
margin: 0,
size: '65%',
background: '#fff',
},
track: {
background: '#F5F5FF',
strokeWidth: '75%',
margin: 0, // margin is in pixels
},
dataLabels: {
showOn: 'always',
name: {
offsetY: 0,
show: false,
color: '#003366',
fontSize: '17px'
},
value: {
formatter: function(val) {
return parseInt(val);
},
color: '#003366',
fontSize: '18px',
show: true,
offsetY: 10,
}
}
}
},
fill: {
colors:['#57CAF0']
},
series: [75],
stroke: {
lineCap: 'round'
},
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
我的代码链接
https://codepen.io/wasifhafeez/pen/JjPyGNa?editors=1010