[英]How can i remove extra space in mobile app?
I am using Highchart framework to develop a mobile app and I have made an app using Highchart, HTML and CSS. 我正在使用Highchart框架开发移动应用程序,我使用Highchart,HTML和CSS创建了一个应用程序。 I've uploaded the screenshot from the app above.
我已从上面的应用上传了屏幕截图。
I want to remove the space between the chart and the table. 我想删除图表和表格之间的空格。
Here is the code for the chart: 这是图表的代码:
$(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"
}
]
}]
});
});
Here is the HTML for the Highchart: 以下是Highchart的HTML:
<div id="statement-graph" style="
height: 60vh;
margin: 0px auto;
width: 100%;
float: left;
text-align: center;
display: table;"></div>
It would be better to see the resulting page source code, so I could identify the elements' separate ID's or classes, but here's one suggestion. 最好是查看生成的页面源代码,这样我就可以识别元素的单独ID或类,但这里有一个建议。 In your code for the chart you have:
在您的图表代码中:
pie: {
dataLabels: {
enabled: false
},
shadow: true,
center: ['50%', '50%'],
borderWidth: 0 // < set this option
}
Try changing 尝试改变
center: ['50%', '50%'], to 中心:['50%','50%'],到
center: ['50%', '25%'], or 中心:['50%','25%']或
center: ['50%', '75%'], 中心:['50%','75%'],
...and where you have: ......你在哪里:
subtitle: {
text: 'Rs 25000',
align: 'center',
verticalAlign: 'middle',
y: 10,
x : 1,
style : {
color: '#fff',
fontSize: '1.2em'
},
},
You could try changing 你可以尝试改变
verticalAlign: 'middle',
to verticalAlign: 'bottom', to verticalAlign:'bottom',
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.