Javascript 如何删除移动应用程序中的额外空间？

我正在使用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"
        }
      ]
    }]
  });
});

$（函数（）{
$（“#语句图”）。高图({
图表：{
plotBackgroundColor:null，
绘图边框宽度：0，
是的，
背景色：“透明”，
边框宽度：0
},
标题：{
文本：“费用”，
对齐：'居中'，
垂直排列：'中间'，
字体：“gothamrnd light”，
y:-10，
x:1，
风格：{
颜色：“#fff”，
字体大小：“0.9em”
},
},
标题：{
},
学分：{
已启用：false
},
副标题:{
文本：“25000卢比”，
对齐：'居中'，
垂直排列：'中间'，
y:10，
x:1，
风格：{
颜色：“#fff”，
字体大小：“1.2米”
},
},
正在导出：{enabled:false}，
工具提示：{
pointFormat:“{point.percentage:.1f}%”
},
打印选项：{
系列：{
数据标签：{
启用：对，
格式：“{point.name}”，
风格：{
颜色：'白色'，
textShadow:'0px 0px 0px白色'，
fontWeight:'200'，
字体：“13px gothamrnd light”
},
接头颜色：“白色”，
}
},
馅饼：{
数据标签：{
已启用：false
},
影子：没错，
中心：['50%，'50%']，
borderWidth:0/<设置此选项
}
},
系列：[{
键入“pie”，
名称：“”，
内部尺寸：“50%”，
showInLegend:false，
数据：[
{
名称：'实用程序'，
y:45，
颜色：“D2C993”
},
{
名称：'服装'，
y:30，
颜色：“CD7D80”
},
{
名称:"娱乐",，
y:15，
颜色：“B486B1”
},
{
姓名：'医疗'，
y:12，
颜色：“5CB1CE”
},
{
名称：'假期'，
y:23，
颜色：“F2C56A”
},
{
名称：“食品和饮料”，
y:30，
颜色：“F78E58”
}
]
}]
});
});

以下是Highchart的HTML：

<div id="statement-graph" style="
    height: 60vh;
    margin: 0px auto;
    width: 100%;
    float: left;
    text-align: center;
    display: table;"></div>

---

最好查看生成的页面源代码，这样我就可以识别元素的单独ID或类，但这里有一个建议。在图表的代码中，您有：

  pie: {
    dataLabels: {
      enabled: false
    },
    shadow: true,
    center: ['50%', '50%'],
    borderWidth: 0 // < set this option
  }

subtitle: {
  text: 'Rs 25000',
  align: 'center',
  verticalAlign: 'middle',
  y: 10,
  x : 1,
  style : {
    color: '#fff',
    fontSize: '1.2em'
  },
},

你可以试着换衣服

  verticalAlign: 'middle',

---

垂直对齐：“底部”

您的意思是缩小图表和表格之间的空间，即彩色的？这里需要注意的是，您没有设置饼图的大小。因此，Highcharts会更改图表大小以适应绘图区域中的所有标签。如果您尝试减少连接器长度并缩短标签，您将看到图表更大，空间也更小。如果您总是知道最长标签的长度，那么您可以尝试查看哪个饼图大小是最好的，然后根据该大小操纵容器大小以减少表和标签之间的空间chart@FedericoMartinez是的。@RahulSharma好的。我会试试看。我认为您应该能够使用chart.marginBottom参数以及plotOptions.pie.size（可能还有pie.center）来缩小这个差距。我已经制作了一个简单的示例，展示了它如何与Highcharts站点的示例表单一起工作：正如您所看到的，饼图和容器底部之间的间隙减小了。