首页 > 解决方案 > 从radialBar Apexcharts 中删除多余的空间

问题描述

我是 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

标签: javascriptjqueryapexcharts

解决方案


这是 ApexCharts 中的一个错误。我刚刚推送了一个提交,它删除了径向条形图的不必要间距。


推荐阅读