高屏不在移动屏幕中央显示

时间：2018-05-10 06:47:06

标签： jquery twitter-bootstrap twitter-bootstrap-3 highcharts bootstrap-4

高架图的堆叠条不显示在Mobile Screen的中心。它是右对齐的。任何人都可以解决这个问题吗？这是我的代码：

<!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>

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

2 个答案:

答案 0 :(得分：1)

这是因为脚本中的'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>

此外，如果您不想在全屏幕上更改marginLeft，则可以使用自适应选项：

$(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
      }
    }
  }]
},

在documentation

了解详情

答案 1 :(得分：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>

这样做，你有更多的选择，这样做更容易和直观。

相关问题
最新问题