старшая диаграмма не отображается в центре на экране мобильного телефона - PullRequest
Новая
       8

старшая диаграмма не отображается в центре на экране мобильного телефона

0 голосов
/ 10 мая 2018

Сложенные столбцы старших графиков не отображаются в центре экрана Mobile. Он выровнен по правому краю. Кто-нибудь может дать решение этой проблемы? Вот мой код: 

<!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 голосов
/ 10 мая 2018

Используйте 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>

Таким образом, у вас есть больше вариантов, и это намного проще и интуитивно понятнее.

0 голосов
/ 10 мая 2018

Это из-за вашего '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
      }
    }
  }]
},

Подробнее в документации

...