Google折线图未在自举模式中显示Y轴标签

时间:2019-12-18 19:21:19

标签: javascript css twitter-bootstrap google-visualization

我试图在引导程序模态中显示折线图,但我注意到,如果将其放置在模态中,则无法显示其Y轴的标签。知道我该如何解决吗?

这是一个基本演示:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="container">
  <div class="row">
   <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <script type="text/javascript">
  google.charts.load('current', {'packages':['corechart', 'line']});
  google.charts.setOnLoadCallback(drawChart1);

  function drawChart1() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Length (cm)');
    data.addColumn('number', '97th');
    data.addColumn('number', '85th');
    data.addColumn('number', '50th');
    data.addColumn('number', '15th');
    data.addColumn('number', '3rd');
    data.addColumn('number', 'Alex Psi');

    data.addRows([
      [0,
        46.3,
        47.9,
        49.9,
        51.8,
        53.4,
        52
      ],
      [
        0,
        46.3,
        47.9,
        49.9,
        51.8,
        53.4,
        null
      ],
      [1,
        51.1,
        52.7,
        54.7,
        56.7,
        58.4,
        56
      ],
      [
        1,
        51.1,
        52.7,
        54.7,
        56.7,
        58.4,
        null
      ],
      [2,
        54.7,
        56.4,
        58.4,
        60.5,
        62.2,
        null
      ],
      [
        2,
        54.7,
        56.4,
        58.4,
        60.5,
        62.2,
        null
      ],
      [3,
        57.6,
        59.3,
        61.4,
        63.5,
        65.3,
        null
      ],
      [
        3,
        57.6,
        59.3,
        61.4,
        63.5,
        65.3,
        null
      ],
      [4,
        60.0,
        61.7,
        63.9,
        66.0,
        67.8,
        null
      ],
      [
        4,
        60.0,
        61.7,
        63.9,
        66.0,
        67.8,
        null
      ],
      [5,
        61.9,
        63.7,
        65.9,
        68.1,
        69.9,
        null
      ],
      [
        5,
        61.9,
        63.7,
        65.9,
        68.1,
        69.9,
        null
      ],
      [6,
        63.6,
        65.4,
        67.6,
        69.8,
        71.6,
        null
      ],
      [
        6,
        63.6,
        65.4,
        67.6,
        69.8,
        71.6,
        null
      ],
      [7,
        65.1,
        66.9,
        69.2,
        71.4,
        73.2,
        null
      ],
      [
        7,
        65.1,
        66.9,
        69.2,
        71.4,
        73.2,
        null
      ],
      [8,
        66.5,
        68.3,
        70.6,
        72.9,
        74.7,
        null
      ],
      [
        8,
        66.5,
        68.3,
        70.6,
        72.9,
        74.7,
        null
      ],
      [9,
        67.7,
        69.6,
        72.0,
        74.3,
        76.2,
        null
      ],
      [
        9,
        67.7,
        69.6,
        72.0,
        74.3,
        76.2,
        null
      ],
      [10,
        69.0,
        70.9,
        73.3,
        75.6,
        77.6,
        null
      ],
      [
        10,
        69.0,
        70.9,
        73.3,
        75.6,
        77.6,
        null
      ],
      [11,
        70.2,
        72.1,
        74.5,
        77.0,
        78.9,
        null
      ],
      [
        11,
        70.2,
        72.1,
        74.5,
        77.0,
        78.9,
        null
      ],
      [12,
        71.3,
        73.3,
        75.7,
        78.2,
        80.2,
        null
      ],
      [
        12,
        71.3,
        73.3,
        75.7,
        78.2,
        80.2,
        null
      ],
      [13,
        72.4,
        74.4,
        76.9,
        79.4,
        81.5,
        65
      ],
      [
        13,
        72.4,
        74.4,
        76.9,
        79.4,
        81.5,
        null
      ],
      [14,
        73.4,
        75.5,
        78.0,
        80.6,
        82.7,
        null
      ],
      [
        14,
        73.4,
        75.5,
        78.0,
        80.6,
        82.7,
        null
      ],
      [15,
        74.4,
        76.5,
        79.1,
        81.8,
        83.9,
        null
      ],
      [
        15,
        74.4,
        76.5,
        79.1,
        81.8,
        83.9,
        null
      ],
      [16,
        75.4,
        77.5,
        80.2,
        82.9,
        85.1,
        null
      ],
      [
        16,
        75.4,
        77.5,
        80.2,
        82.9,
        85.1,
        null
      ],
      [17,
        76.3,
        78.5,
        81.2,
        84.0,
        86.2,
        null
      ],
      [
        17,
        76.3,
        78.5,
        81.2,
        84.0,
        86.2,
        null
      ],
      [18,
        77.2,
        79.5,
        82.3,
        85.1,
        87.3,
        null
      ],
      [
        18,
        77.2,
        79.5,
        82.3,
        85.1,
        87.3,
        null
      ],
      [19,
        78.1,
        80.4,
        83.2,
        86.1,
        88.4,
        null
      ],
      [
        19,
        78.1,
        80.4,
        83.2,
        86.1,
        88.4,
        null
      ],
      [20,
        78.9,
        81.3,
        84.2,
        87.1,
        89.5,
        null
      ],
      [
        20,
        78.9,
        81.3,
        84.2,
        87.1,
        89.5,
        null
      ],
      [21,
        79.7,
        82.2,
        85.1,
        88.1,
        90.5,
        null
      ],
      [
        21,
        79.7,
        82.2,
        85.1,
        88.1,
        90.5,
        null
      ],
      [22,
        80.5,
        83.0,
        86.0,
        89.1,
        91.6,
        null
      ],
      [
        22,
        80.5,
        83.0,
        86.0,
        89.1,
        91.6,
        null
      ],
      [23,
        81.3,
        83.8,
        86.9,
        90.0,
        92.6,
        null
      ],
      [
        23,
        81.3,
        83.8,
        86.9,
        90.0,
        92.6,
        null
      ],
      [24,
        82.1,
        84.6,
        87.8,
        91.0,
        93.6,
        null
      ],
      [
        24,
        82.1,
        84.6,
        87.8,
        91.0,
        93.6,
        null
      ],
    ]);

    var options = {
      series: {
        0: { color: '#e2431e' },
        1: { color: '#f1ca3a' },
        2: { color: '#6f9654' },
        3: { color: '#f1ca3a' },
        4: { color: '#e2431e' },
        5: { color: '#0696d5', pointSize: 10 }
      },
      chartArea: {top: 20, left: 80, bottom: 40, width: '100%', height: '100%'},
      hAxis: { title: 'Age (months)',
        viewWindow:{
          max:24,
          min:0
        }
      },
      vAxis: { title: 'Length (cm)',
        viewWindow:{
          max:95,
          min:45
        },
      },
      width: '100%',
      height: 600,
      curveType: 'function',
    };

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

    chart.draw(data, options);
  }


</script>
<div id="curve_chart1"></div>
      </div>
      
    </div>
  </div>
</div>
  </div>  
</div>

0 个答案:

没有答案