구글 column chart 스크롤 적용하는 방법이 뭔가요?
조회수 1133회
{% block barChart %}
<div id="columnchart_values" style="width:100%; height:300px;"></div>
<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([
["Element", "Density", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"],
["Platinum", 21.45, "color: #e5e4e2"],
["Platinum", 21.45, "color: #e5e4e2"],
["Platinum", 21.45, "color: #e5e4e2"],
["Platinum", 21.45, "color: #e5e4e2"],
["Platinum", 21.45, "color: #e5e4e2"],
["Platinum", 21.45, "color: #e5e4e2"],
["Platinum", 21.45, "color: #e5e4e2"],
["Platinum", 21.45, "color: #e5e4e2"],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
// 차트 제목
title: "차트 제목 입력 구간",
// 차트 제목 스타일
titleTextStyle:{
color:'gray',
fontSize:18,
bold:true,
//fontName:,
},
// 데이터 레이블 속성
annotations: {
textStyle: {
//fontName: 'Times-Roman',
fontSize: 18,
bold: true,
italic: false,
color: 'blue',
auraColor: 'blue',
opacity: 0.8
}
},
// 툴팁 속성
tooltip: {textStyle: {color: '#FF0000', fontSize:17}, showColorCode: true},
// 차트 배경색
backgroundColor:{fill:'#f2f2f2', stroke:'skyblue', strokeWidth:4},
chartArea:{width:'70%',height:'70%',backgroundColor:'yellow'},
//
explorer: { axis: 'horizontal', actions: ['dragToPan'] },
width: 600,
height: 300,
bar: {groupWidth: "95%"},
legend: { position: "none" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
</script>
{% endblock %}
첨부된 이미지의 코드입니다.
보시다시피 x축의 요소들이 늘어나면서 보기 싫게 좁아지는데
영역이 초과되면 가로 스크롤이 적용 되도록 할 수 있나요?
1 답변
-
div#columnchart_values를 하나의img라고 생각하시고, 충분한 너비를 갖도록 만드세요.그리고
div#columnchart_values를 감싸는div를 하나 더 만든 다음 이런 스타일링을 주세요..chart-container { max-width: 600px; /* 부트스트랩 grid system 안에서 쓰고 있다면 아마 100% 를 줘도 될것 */ overflow-x: scroll; }그러면 될 겁니다.
+ 근데 아마도, 괜찮은 차트 라이브러리들은 Zoom control을 제공하는 법이니까, google visualization 라이브러리도 그런게 있는지 찾아봐서 있으면 그걸 적용하는 게 좋을 것입니다. 내게 닥친 이 문제는 이미 수많은 사람들이 겪은 것이며, 이미 해결법이 나와 있고, 내가 그걸 아직 탐색해내지 못한 것뿐이라고 생각해 주세요. 보통 그렇거든요.
- 해당 방법으로 시도는 해봤으나 치명적인 문제가 그래프 전체 영역이 스코롤 되는 문제가 생겨서 Y축 또는X축이 스크롤 되면서 안 보이는 문제가 생깁니다.... 때문에 차트 영역에만 스크롤이 될수 있도록 하는 방법은 없을까요? 김재민 2020.9.27 16:48
- 찾아보니 explorer 라는 설정옵션이 존재하네요. 시도해 보세요. https://developers.google.com/chart/interactive/docs/gallery/columnchart 엽토군 2020.9.27 20:21
- explorer 옵션은 date, number 속성에서만 지원허다라구요. 저는 string속성을 axis에 나열 시킬건데 방법이 없는거 같네요... 김재민 2020.9.28 17:35
댓글 입력