高图表未显示在移动屏幕的中心

高图表的堆叠条形图不会显示在移动的中心，Screen.it 右对齐。任何人都可以给出这个问题的解决方案吗？这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>  
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="container" style="min-width: 100%; max-width:100%; height: 400px; margin: 0 auto"></div>
</div>
</div>
</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
marginLeft:120,
marginBottom: 100,
type:'bar'
},
credits: {enabled: false},
legend: { 
enabled: true,
layout: 'vertical',
backgroundColor: '#FFFFFF',
floating: true,
align: 'right',
verticalAlign: 'bottom',
margin: 50
},
title: {text: null},
tooltip: {},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
color: '#006666',
pointWidth: 40,
data: [2, 2, 1, 1, 1]
}, {
name: 'Jane',
color: '#00FF00',
pointWidth: 40,
data: [2, 2, 2, 1, 2]
}, {
name: 'Joe',
color: '#FF8C00',
pointWidth: 40,
data: [1, 1, 1, 1, 1],
}],
xAxis: {
categories: ['Computer Devices & Accessories', 'Computer Peripherals Hire & Repair Services', 'Computer Laptop Hardware & Peripherals', 'Computer Stationery, Hard disk, Ram, Pen Drives & Other Products', 'Internet Accessories'],
labels: {
overflow: 'right',
display: 'block',
align: 'left',
x:5,
style: {
fontSize: '1em',
color:'#000',
width:'500px'
}
}
},
yAxis: {
min: 0,
allowDecimals: false,
title: {
text: ''
}
}       
});

});
</script>
</body>
</html>

移动设备是否有任何特定配置，如果是，它们到底是什么？我是否必须自定义样式，或者是否有一些配置可以使其工作？请指教。

这是因为你在脚本中的"marginLeft"。您可以在数组中设置边距，这样它就可以很好地以移动设备为中心。此外，您的所有脚本标签都应位于正文底部。

请参阅代码片段：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>  
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="container" style="min-width: 100%; max-width:100%; height: 400px; margin: 0 auto"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
/* marginLeft:120, */
/* marginBottom: 100, */
margin: [30,30,30,30],
type:'bar'
},
credits: {enabled: false},
legend: { 
enabled: true,
layout: 'vertical',
backgroundColor: '#FFFFFF',
floating: true,
align: 'right',
verticalAlign: 'bottom',
margin: 50
},
title: {text: null},
tooltip: {},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
color: '#006666',
pointWidth: 40,
data: [2, 2, 1, 1, 1]
}, {
name: 'Jane',
color: '#00FF00',
pointWidth: 40,
data: [2, 2, 2, 1, 2]
}, {
name: 'Joe',
color: '#FF8C00',
pointWidth: 40,
data: [1, 1, 1, 1, 1],
}],
xAxis: {
categories: ['Computer Devices & Accessories', 'Computer Peripherals Hire & Repair Services', 'Computer Laptop Hardware & Peripherals', 'Computer Stationery, Hard disk, Ram, Pen Drives & Other Products', 'Internet Accessories'],
labels: {
overflow: 'right',
display: 'block',
align: 'left',
x:5,
style: {
fontSize: '1em',
color:'#000',
width:'500px'
}
}
},
yAxis: {
min: 0,
allowDecimals: false,
title: {
text: ''
}
}       
});
});
</script>
</body>
</html>

另外，如果您不想在全屏上更改边距左边距，则可以使用响应式选项：

$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
marginLeft:120,
marginBottom: 100,
/* margin: [30,30,30,30], */
type:'bar'
},
responsive: {
rules: [{
condition: {
maxWidth: 600
},
chartOptions: {
chart: {
marginLeft: 0
}
}
}]
},

有关详细信息，请参阅文档

使用`margin:0`而不是`marginLeft`和`marginBottom`

有几种方法可以解决此问题。我认为最好的方法是删除marginLeft和marginBottom，而是使用margin: 0。

chart: {
renderTo: 'container',
/* marginLeft:120, */
/* marginBottom: 100, */
margin: 0,
type: 'bar'
},

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="container" style="min-width: 100%; max-width:100%; height: 400px; margin: 0 auto"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
/* marginLeft:120, */
/* marginBottom: 100, */
margin: 0,
type: 'bar'
},
credits: {
enabled: false
},
legend: {
enabled: true,
layout: 'vertical',
backgroundColor: '#FFFFFF',
floating: true,
align: 'right',
verticalAlign: 'bottom',
margin: 50
},
title: {
text: null
},
tooltip: {},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
color: '#006666',
pointWidth: 40,
data: [2, 2, 1, 1, 1]
}, {
name: 'Jane',
color: '#00FF00',
pointWidth: 40,
data: [2, 2, 2, 1, 2]
}, {
name: 'Joe',
color: '#FF8C00',
pointWidth: 40,
data: [1, 1, 1, 1, 1],
}],
xAxis: {
categories: ['Computer Devices & Accessories', 'Computer Peripherals Hire & Repair Services', 'Computer Laptop Hardware & Peripherals', 'Computer Stationery, Hard disk, Ram, Pen Drives & Other Products', 'Internet Accessories'],
labels: {
overflow: 'right',
display: 'block',
align: 'left',
x: 5,
style: {
fontSize: '1em',
color: '#000',
width: '500px'
}
}
},
yAxis: {
min: 0,
allowDecimals: false,
title: {
text: ''
}
}
});
});
</script>
</body>
</html>

如果要添加margin，请使用 Bootstrap 的间距类为container添加空间。

您应该使用col-12而不是col-md-12因为行内只有一列。而不是*-width和margin:auto，使用w-100。由于它的宽度是100%的，所以没有必要使用margin:auto。但是如果要添加margin，请使用m-*。

<div id="container" style="height: 400px;" class="w-100 mx-sm-5"></div>

这样做，您有更多的选择，这样做要容易得多，也直观得多。

使用`margin:0`而不是`marginLeft`和`marginBottom`

相关内容

最新更新

热门标签：

高图表未显示在移动屏幕的中心

使用margin:0而不是marginLeft和marginBottom

相关内容

最新更新

热门标签：

使用`margin:0`而不是`marginLeft`和`marginBottom`