我正在使用Highchart框架开发移动应用程序,并已经使用Highchart、HTML和CSS制作了一个应用程序。上面是来自应用程序的屏幕截图。
我想要去除图表和表格之间的空白。
这是图表的代码:
$(function () {
$('#statement-graph').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: true,
backgroundColor: 'transparent',
borderWidth: 0
},
title: {
text: 'Expense',
align: 'center',
verticalAlign: 'middle',
font: 'gothamrnd-light',
y: -10,
x : 1,
style : {
color: '#fff',
fontSize: '0.9em'
},
},
header :{
},
credits: {
enabled: false
},
subtitle: {
text: 'Rs 25000',
align: 'center',
verticalAlign: 'middle',
y: 10,
x : 1,
style : {
color: '#fff',
fontSize: '1.2em'
},
},
exporting: { enabled: false },
tooltip: {
pointFormat: '<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>',
style: {
color: 'white',
textShadow: '0px 0px 0px white',
fontWeight: '200',
font: '13px gothamrnd-light'
},
connectorColor: 'white',
}
},
pie: {
dataLabels: {
enabled: false
},
shadow: true,
center: ['50%', '50%'],
borderWidth: 0 // < set this option
}
},
series: [{
type: 'pie',
name: '',
innerSize: '50%',
showInLegend: false,
data: [
{
name: 'Utilities',
y: 45,
color : "#D2C993"
},
{
name: 'Clothing',
y: 30,
color : "#CD7D80"
},
{
name: 'Entertainment',
y: 15,
color : "#B486B1"
},
{
name: 'Medical',
y: 12,
color : "#5CB1CE"
},
{
name: 'Vacations',
y: 23,
color : "#F2C56A"
},
{
name: 'Food & Drinks',
y: 30,
color : "#F78E58"
}
]
}]
});
});
以下是Highchart的HTML代码:
<div id="statement-graph" style="
height: 60vh;
margin: 0px auto;
width: 100%;
float: left;
text-align: center;
display: table;"></div>