highchart没有显示在移动屏幕的中心答案

【问题标题】：highchart not displaying in the center on mobile screenhighchart没有显示在移动屏幕的中心
【发布时间】：2018-10-20 09:12:15
【问题描述】：

高图表的堆叠条未显示在移动屏幕的中心。它是右对齐的。任何人都可以解决这个问题吗？这是我的代码：

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

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

【问题讨论】：

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

【解决方案1】：

这是因为脚本中的“marginLeft”。您可以在数组中设置边距，以便以移动设备为中心。此外，您所有的脚本标签都应该在正文的底部。

见代码sn-p：

<!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查看更多信息

【讨论】：

【解决方案2】：

使用`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-*。

&lt;div id="container" style="height: 400px;" class="w-100 mx-sm-5"&gt;&lt;/div&gt;

这样做，您有更多选择，而且这样做更容易和直观。

【讨论】：

使用margin:0 代替marginLeft 和marginBottom

使用`margin:0` 代替`marginLeft` 和`marginBottom`