使用两个Google图表时,一个垂直轴消失。 第一个谷歌图表的垂直轴工作正常。 但是第二个Google图表的垂直轴不可见。 显然,我复制并粘贴了两个图表, 我有两个div,怎么了?
//这是我的代码
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var year1 = /*[[ ${reallist3} ]]*/; //년별 매매
var year2 = /*[[ ${reallist4} ]]*/; //년별 전월세
/*]]>*/
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data1 = new google.visualization.DataTable();
data1.addColumn('string', 'Element');
data1.addColumn('number', '가격');
var data2 = new google.visualization.DataTable();
data2.addColumn('string', 'Element');
data2.addColumn('number', '가격');
for(var i = 0; i < year1.length; i++){
data1.addRow([year1[i].date + "(만원)", Number(year1[i].price)]);
}
for(var i = 0; i < year2.length; i++){
data2.addRow([year2[i].date + "(만원)", Number(year2[i].price)]);
}
var view1 = new google.visualization.DataView(data1);
view1.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" }
]);
var options1 = {
width: 1100,
height: 500,
bar: {groupWidth: "50%"},
legend: { position: "none" },
vAxis: {minValue : 0},
colors: ["pink","#81BEF7"],
chartArea:{left:60,top:20,width:"80%",height:"85%"}
};
var chart1 = new google.visualization.ColumnChart(document.getElementById("chart_real1"));
chart1.draw(view1, options1);
var view2 = new google.visualization.DataView(data2);
view2.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" }
]);
var options2 = {
width: 1100,
height: 500,
bar: {groupWidth: "50%"},
legend: { position: "none" },
vAxis: {minValue : 0},
colors: ["pink","#81BEF7"],
chartArea:{left:60,top:20,width:"80%",height:"85%"}
};
var chart2 = new google.visualization.ColumnChart(document.getElementById("chart_real2"));
chart2.draw(view2, options2);
}
</script>