我试图在引导程序模态中显示折线图,但我注意到,如果将其放置在模态中,则无法显示其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">×</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>