Question

我正在使用Highchart框架开发移动应用程序，我使用Highchart，HTML和CSS创建了一个应用程序。我已经从上面的应用上传了屏幕截图。

我想删除图表和表格之间的空格。

以下是图表的代码：

checkboxlimit(document.getElementsByName('seatdata[]'), 2);

以下是Highchart的HTML：

$(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"
        }
      ]
    }]
  });
});

Answer 1

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

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

尝试更改

中心：['50％'，'50％']，

中心：['50％'，'25％']或

中心：['50％'，'75％']，

......以及你所拥有的地方：

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

您可以尝试更改

  verticalAlign: 'middle',

到verticalAlign：'bottom'，

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

1 个答案: