从radialBar Apexcharts删除多余的空间

时间:2019-09-05 07:20:41

标签: javascript jquery apexcharts

我是apexcharts的新手,无法弄清楚如何在radialBar图表中删除多余的空间。

我希望拥有与我创建的甜甜圈图相同的类型,但周围没有多余的空格。

我的代码具有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

1 个答案:

答案 0 :(得分:0)

这是ApexCharts中的错误。 我刚刚按下了commit,它消除了radialBar图表的不必要间距。