Wie kann ich zusätzlichen Speicherplatz in der mobilen App entfernen?

Ich benutze Highchart-Framework, um eine mobile App zu entwickeln, und ich habe eine App mit Highchart, HTML und CSS gemacht. Ich habe den Screenshot von der obigen App hochgeladen.Wie kann ich zusätzlichen Speicherplatz in der mobilen App entfernen?

Ich möchte den Abstand zwischen dem Diagramm und der Tabelle entfernen. Hier

ist der Code für das Diagramm:

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

Hier ist der HTML-Code für die Highchart:

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

Quelle

2016-06-23 Swapnil Kadam

Sie meinen, die Verringerung der Raum zwischen dem Diagramm und der Tabelle, die eine farbige? –

Hier ist zu beachten, dass Sie die Größe des Kuchens nicht festlegen. Daher ändert Highcharts die Diagrammgröße so, dass sie allen Beschriftungen im Diagrammbereich entspricht. Wenn Sie versuchen, die Länge des Anschlusses zu reduzieren und die Beschriftungen zu kürzen, sehen Sie, dass das Diagramm größer und der Platzbedarf reduziert ist. Wenn Sie immer die Länge des längsten Etiketts kennen, dann können Sie versuchen zu sehen, welche Tortengröße am besten ist und dann entsprechend die Containergröße manipulieren, um den Abstand zwischen der Tabelle und dem Diagramm zu reduzieren. –

@FedericoMartinez yes. –

Es wäre besser, die resultierende Seite Quellcode zu sehen, so konnte ich identifizieren Die Elemente sind separate IDs oder Klassen, aber hier ist ein Vorschlag. In Ihrem Code für das Diagramm Sie haben:

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

Try Ändern

Zentrum: ['50% ''50% '], zu

Zentrum: ['50%',' 25% '] oder

Zentrum: ['50%', '75% '],

... und wo Sie haben:

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

Sie könnten versuchen,

verticalAlign: 'middle',

zu vertical Wechsel: ‚bottom‘,

Quelle

2017-09-07 18:35:22 psiclone

Wie kann ich zusätzlichen Speicherplatz in der mobilen App entfernen?

Antwort

Verwandte Themen