5
モバイルアプリで余分なスペースを削除するにはどうすればよいですか？
ハイチャートフレームワークを使用してモバイルアプリを開発しており、ハイチャート、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>
、1着色？ –
ここで注意すべきことは、パイのサイズを設定しないことです。そのため、Highchartsは、プロット領域のすべてのラベルに合わせて、チャートのサイズを変更します。コネクタの長さを短くしてラベルを短くしようとすると、グラフが大きくなり、スペースが小さくなることがわかります。最も長いラベルの長さを常に知っているなら、どの円のサイズが最も良いかを試してみることができます。それに応じて、テーブルとチャートの間のスペースを減らすためにコンテナのサイズを操作します。 –
@FedericoMartinez yes。 –