저는 HTML, CSS 및 Javascript가 처음입니다. 저는 JSP 애플리케이션을 작성하고 있습니다 (저는 자바 프로그래머입니다). 반응 형 웹 디자인에 대해 배우고 있습니다. 반응 형 디자인을 사용하기 위해 일부 Google 차트를 얻는 데 어려움이 있습니다. 페이지에 두 개의 차트가 나란히 있습니다.Google 차트 반응 형으로 만들기
나는 코드 on에서 반응이 빠른 Google 차트를 얻는 방법의 예를 사용했습니다. codepen의 웹 사이트에서이 예제를 사용하면 예제가 작동합니다. 그러나 내 컴퓨터에 저장하고 파일을 열면 차트가 더 이상 반응하지 않습니다. 그것은 내가 잘못한 코드가 아니라 내 브라우저에있는 코드라고 생각하게 만듭니다. 어떤 도움이라도 대단히 감사하겠습니다.
다음은 JSP 응용 프로그램에 대한 코드입니다. html로 :
<div class="charts">
<div class="pieChartDiv">
<div id="piechart"></div>
</div>
<div class="lineChartDiv">
<div id="chart_div"></div>
</div>
</div>
CSS의 :
.charts {
width: 80%;
height: 35%;
border: 1px solid blue;
overflow: hidden;
margin: auto;
margin-top: 50px;
background: #CFC3F8;
box-shadow: 10px 10px 5px #888888;
}
.pieChartDiv {
padding: 0;
float: right;
width: 50%;
height: 100%;
border-left: 1px solid white;
}
.lineChartDiv {
float: left;
width: 50%;
height: 100%;
}
#piechart {
width: 100%;
height: 100%;
}
#chart_div {
width: 100%;
height: 100%;
}
@media only screen and (max-width: 460px) {
.charts {
width: 80%;
height: 70%;
}
.pieChartDiv {
width: 100%;
height: 50%;
border: none;
border-bottom: 1px solid white;
}
.lineChartDiv {
width: 100%;
height: 50%;
}
}
자바 스크립트 차트에 대한 :
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('43', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Cakes', 11],
['Cupcakes', 2],
['Cookies', 2],
['Other', 2],
]);
var options = {
title: 'Product Sales',
'legend':'left',
'is3D':true,
'width':550,
'height':320,
backgroundColor: '#CFC3F8',
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<script>
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Sales');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
[54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
[60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
[66, 70], [67, 72], [68, 75], [69, 80]
]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
hAxis: {gridlines: {color: '#1E4D6B'}},
vAxis: {gridlines: {color: '#1E4D6B'}},
legend: { position: 'top' },
backgroundColor: '#CFC3F8'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
페이지의 스크린 샷과 작은 크기의 페이지 :
첫 번째 차트의 크기가 조정되지 않는 것처럼 보입니다. codepen의 예제는 같은 방식으로 작동합니다.
Codepen 예제 :
https://codepen.io/flopreynat/pen/BfLkA
내가 해제 방법이 될 수있다, 그래서 나와 함께 곰하시기 바랍니다. 조언이 도움이 될 것입니다.
$(window).resize(function(){
ChartFunctionName();
});
저는 초보자입니다 그러나 이것은 내가 발견하고 사용하는 것입니다 : 창 크기를 변경하면이 코드는 당신을위한 해결책이 될 수 있습니다 생각
차트'다시 그려야 할 onresize' – WhiteHat