Не отображается график на мобильных устройствах

Question

Не отображается график на мобильных устройствах

Рейтинг: 0Ответов: 0Опубликовано: 11.08.2023

Не сильно разбираюсь в фронтенде, делаю представление для Java Spring приложения. И столкнулся с проблемой, что график не отображается на мобильных устройствах. На пк проблем нет - все открывается. А вот на мобильных устройствах нет: (пробывал на ios - safari, и на андроиде хром). И там и там не отображается. Пробовал также библиотеку Chart.js. Такая же ситуация. Подскажите пожалуйста в чем может быть дело и как решить? Сам график:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: black;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      #header {
        color: white;
        font-size: 24px;
        padding: 20px;
      }
      #chart-container {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      #curve_chart {
        width: 100%;
        height: 500px;
      }
      #configure-button {
        background-color: green;
        color: white;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        margin-top: 20px;
      }
    </style>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Month', 'Weight'],
          ['Jan', 73.4],
          ['Feb', 72.1],
          ['Mar', 72.3],
          ['Apr', 71.0],
          ['May', 71.9],
          ['Jun', 72.0],
          ['Jul', null],
          ['Aug', 73.3],
          ['Sep', 71.0],
          ['Oct', 72.0],
          ['Nov', null],
          ['Dec', null]
        ]);

        // Fill in null values with previous non-null values
        for (var row = 1; row < data.getNumberOfRows(); row++) {
          if (data.getValue(row, 1) === null) {
            data.setValue(row, 1, data.getValue(row - 1, 1));
          }
        }

        var options = {
          title: 'Weight Progress',
          backgroundColor: 'black', // Set the background color to black
          colors: ['green'], // Set the line color to green
          curveType: 'function',
          legend: { position: 'bottom' },
          lineWidth: 3, // Set the line width
          hAxis: {
            title: 'Month',
            textStyle: {
              color: 'white' // Set the axis text color to white
            },
            slantedText: true, // Rotate axis labels
            slantedTextAngle: 45 // Angle of rotation
          },
          vAxis: {
            title: 'Weight',
            textStyle: {
              color: 'white' // Set the axis text color to white
            },
            maxValue: 75, // Adjust maximum value on the y-axis
            gridlines: { color: 'transparent' } // Hide vertical gridlines
          }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="header">Weight Chart</div>
    <div id="chart-container">
      <div id="curve_chart"></div>
      <button id="configure-button">Configure</button>
    </div>
  </body>
</html>

javascript html

Источник: Stack Overflow на русском

Не отображается график на мобильных устройствах

Ответы