개요
Google 차트에는 시리즈 주위에 간격이 표시될 수 있습니다. 신뢰 구간, 값 주변의 최솟값과 최댓값, 백분위수 샘플링 또는 계열에 따라 서로 다른 마진이 필요한 기타 항목을 묘사하는 데 사용될 수 있습니다.
선, 막대, 상자, 스틱, 점, 영역의 6가지 간격 스타일입니다. 아래에서 각 항목의 예를 참고하세요. 각 예에서는 간격 없이 표시된 동일한 데이터 세트를 사용합니다.
위의 차트는 단순합니다. 중요도가 동일한 일련의 데이터 시리즈가 7개 있습니다. 다음 자료에서는 첫 번째 시리즈가 기본 시리즈이고 다른 6개 시리즈는 간격을 통해 비교되는 것으로 가정하겠습니다.
줄 간격
선 간격은 여러 실험의 편차를 나타내는 데 사용되기도 합니다. 다음 차트에서는 기본 시리즈와 그 주변의 간격을 보여줍니다.
<html>
<head>
<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 = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'values');
data.addColumn({id:'i0', type:'number', role:'interval'});
data.addColumn({id:'i1', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addRows([
[1, 100, 90, 110, 85, 96, 104, 120],
[2, 120, 95, 130, 90, 113, 124, 140],
[3, 130, 105, 140, 100, 117, 133, 139],
[4, 90, 85, 95, 85, 88, 92, 95],
[5, 70, 74, 63, 67, 69, 70, 72],
[6, 30, 39, 22, 21, 28, 34, 40],
[7, 80, 77, 83, 70, 77, 85, 90],
[8, 100, 90, 110, 85, 95, 102, 110]]);
// The intervals data as narrow lines (useful for showing raw source data)
var options_lines = {
title: 'Line intervals, default',
curveType: 'function',
lineWidth: 4,
intervals: { 'style':'line' },
legend: 'none'
};
var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
chart_lines.draw(data, options_lines);
}
</script>
</head>
<body>
<div id="chart_lines" style="width: 900px; height: 500px;"></div>
</body>
</html>
위 데이터를 보면 보조 시리즈에 서로 다른 세 가지 식별자인 i0, i2, i3가 연결되어 있음을 알 수 있습니다. 이를 사용하여 계열의 스타일을 다르게 지정할 수 있습니다. 아래에서는 다양한 색상과 두께를 제공합니다.
참고: 일반적으로 위에서 설명한 것처럼 ID를 재사용하는 것은 좋지 않으며 i2는 4번 사용됩니다. 작동은 하지만 향후 이 동작을 변경할 수 있습니다.
유일한 차이점은 다음과 같습니다.
var options_lines = {
title: 'Line intervals, tailored',
lineWidth: 4,
curveType:'function',
interval: {
'i0': { 'style':'line', 'color':'#D3362D', 'lineWidth': 0.5 },
'i1': { 'style':'line', 'color':'#F1CA3A', 'lineWidth': 1 },
'i2': { 'style':'line', 'color':'#5F9654', 'lineWidth': 2 },
},
legend: 'none',
};
막대 간격
막대 간격은 데이터를 중심으로 오류 막대를 만듭니다. 간격의 첫 번째 열과 마지막 열은 도메인 축과 평행한 넓은 막대로 그려지며 안쪽 열은 더 짧은 '틱'으로 그려집니다. 넓은 막대를 조인하기 위해 '스틱'이 추가됩니다. 이 두 막대의 값이 같다면 pointSize 옵션이 0이 아닌 한 막대가 하나의 점으로 렌더링됩니다.
첫 번째 열과 마지막 열에 상응하는 가로 막대의 너비는 intervals.barWidth로 제어되고 내부 열에 상응하는 가로 막대의 너비는 intervals.shortBarWidth로 제어됩니다. 생략하면 위 옵션과 같은 차트와 함께 아래 옵션이 표시됩니다.
var options_bars = {
title: 'Bars, default',
curveType: 'function',
series: [{'color': '#D9544C'}],
intervals: { style: 'bars' },
legend: 'none',
};
상자 간격
데이터 상자의 상자 간격은 중첩된 직사각형 집합으로 렌더링됩니다. 첫 번째와 마지막 열은 가장 바깥쪽 직사각형을 형성하고 내부 열은 포함된 상자 내에서 더 어두운 직사각형으로 렌더링됩니다.
상자 간격을 지정하는 방법은 다음과 같습니다.
var options = {
series: [{'color': '#1A8763'}],
intervals: { style: 'boxes' },
legend: 'none',
};
intervals.lineWidth 및 intervals.barWidth 옵션을 사용하여 상자를 더 눈에 띄게 만들 수 있습니다.
관련 옵션:
var options = {
title:'Boxes, thick',
curveType:'function',
lineWidth: 4,
series: [{'color': '#1A8763'}],
intervals: { 'lineWidth':2, 'barWidth': 0.5, style: 'boxes' },
legend: 'none',
};
고정 간격
스틱 간격은 열 쌍을 타겟 축과 평행한 스틱 세트로 표시합니다. 높이가 0인 스틱은 점으로 렌더링되며, pointSize 옵션을 0으로 설정하여 억제할 수 있습니다.
'sticks'의 style를 사용하여 만들 수 있습니다.
var options_sticks = {
title:'Sticks, default',
curveType:'function',
series: [{'color': '#E7711B'}],
intervals: { style: 'sticks' },
legend: 'none',
};
포인트 간격
포인트 간격은 간격 데이터를 작은 원으로 표시합니다.
점 크기는 intervals.pointSize 옵션으로 제어할 수 있습니다. 다음은 2입니다.
var options_points = {
title:'Points, default',
curveType:'function',
lineWidth: 4,
series: [{'color': '#D3362D'}],
intervals: { 'style':'points', pointSize: 2 },
legend: 'none',
};
8시 이미지는 다음과 같습니다.
영역 간격
영역 간격은 인터벌 데이터를 중첩된 음영 영역의 집합으로 렌더링합니다. 열 쌍을 중첩하는 것은 짝수 열만 필요하다는 점을 제외하면 상자 간격과 유사합니다.
style를 'area'로 설정하면 됩니다.
var options = {
title:'Area, default',
curveType:'function',
series: [{'color': '#F1CA3A'}],
intervals: { 'style':'area' },
legend: 'none',
};
간격 스타일 결합
더 세부적으로 맞춤설정하려면 하나의 차트에서 간격 스타일을 결합할 수 있습니다.
다음은 영역과 막대 간격을 결합한 차트입니다.
위 차트에서는 i0 및 i1 태그가 지정된 간격에서는 'bars'의 style, i2에는 'area' 스타일을 지정합니다. 그런 다음 pointSize를 사용하여 막대를 제한합니다.
var options = {
title:'Bar/area interval chart',
curveType:'function',
intervals: { 'color':'series-color' },
interval: {
'i0': { 'color': '#4374E0', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 },
'i1': { 'color': '#E49307', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 },
'i2': { 'style':'area', 'curveType':'function', 'fillOpacity':0.3 }},
legend: 'none',
};
다음은 i2 간격이 막대로 표시되는 막대 간격 선 차트입니다.
var options = {
title:'Sticks, horizontal',
curveType:'function',
lineWidth: 4,
series: [{'color': '#E7711B'}],
intervals: { 'lineWidth': 4, 'barWidth': 0.5 },
interval: {
'i2': { 'style':'sticks', 'color':'grey', 'boxWidth': 2.5,
'lineWidth': 1 }
},
legend: 'none',
};
다음은 불투명도가 낮은 상자를 사용하여 선택된 간격을 배경에 배치하는 간격 선 차트입니다.
// Focus is the error bars, but boxes are visible in the background.
var options_boxes_background = {
title:'Background boxes',
curveType:'function',
lineWidth: 4,
series: [{'color': '#1A8763'}],
intervals: { 'lineWidth':2, 'barWidth': 0.5 },
interval: {
'i2': { 'style':'boxes', 'color':'grey', 'boxWidth': 2.5,
'lineWidth': 0, 'fillOpacity': 0.2 }
},
legend: 'none',
};
boxWidth와 함께 한 간격에
낮은 불투명도 'points' 스타일을 지정하여
'포인트와 수염' 간격 차트를 만들 수 있습니다.
var options = {
title:'Points and whiskers',
curveType:'function',
lineWidth: 4,
series: [{'color': '#D3362D'}],
intervals: { 'lineWidth':2, 'barWidth': 0.5 },
interval: {
'i2': { 'style':'points', 'color':'grey', 'pointSize': 10,
'lineWidth': 0, 'fillOpacity': 0.3 }
},
legend: 'none',
};
상자 플롯
마지막으로, 위의 '점 및 수염' 차트를 기반으로 상자 및 막대 간격을 사용하여 기본 상자 플롯 차트를 만들 수 있습니다.
var options = {
title:'Box Plot',
height: 500,
legend: {position: 'none'},
hAxis: {
gridlines: {color: '#fff'}
},
lineWidth: 0,
series: [{'color': '#D3362D'}],
intervals: {
barWidth: 1,
boxWidth: 1,
lineWidth: 2,
style: 'boxes'
},
interval: {
max: {
style: 'bars',
fillOpacity: 1,
color: '#777'
},
min: {
style: 'bars',
fillOpacity: 1,
color: '#777'
}
}
};
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawBoxPlot);
function drawBoxPlot() {
var array = [
['a', 100, 90, 110, 85, 96, 104, 120],
['b', 120, 95, 130, 90, 113, 124, 140],
['c', 130, 105, 140, 100, 117, 133, 139],
['d', 90, 85, 95, 85, 88, 92, 95],
['e', 70, 74, 63, 67, 69, 70, 72],
['f', 30, 39, 22, 21, 28, 34, 40],
['g', 80, 77, 83, 70, 77, 85, 90],
['h', 100, 90, 110, 85, 95, 102, 110]
];
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'series0');
data.addColumn('number', 'series1');
data.addColumn('number', 'series2');
data.addColumn('number', 'series3');
data.addColumn('number', 'series4');
data.addColumn('number', 'series5');
data.addColumn('number', 'series6');
data.addColumn({id:'max', type:'number', role:'interval'});
data.addColumn({id:'min', type:'number', role:'interval'});
data.addColumn({id:'firstQuartile', type:'number', role:'interval'});
data.addColumn({id:'median', type:'number', role:'interval'});
data.addColumn({id:'thirdQuartile', type:'number', role:'interval'});
data.addRows(getBoxPlotValues(array));
/**
* Takes an array of input data and returns an
* array of the input data with the box plot
* interval data appended to each row.
*/
function getBoxPlotValues(array) {
for (var i = 0; i < array.length; i++) {
var arr = array[i].slice(1).sort(function (a, b) {
return a - b;
});
var max = arr[arr.length - 1];
var min = arr[0];
var median = getMedian(arr);
// First Quartile is the median from lowest to overall median.
var firstQuartile = getMedian(arr.slice(0, 4));
// Third Quartile is the median from the overall median to the highest.
var thirdQuartile = getMedian(arr.slice(3));
array[i][8] = max;
array[i][9] = min
array[i][10] = firstQuartile;
array[i][11] = median;
array[i][12] = thirdQuartile;
}
return array;
}
/*
* Takes an array and returns
* the median value.
*/
function getMedian(array) {
var length = array.length;
/* If the array is an even length the
* median is the average of the two
* middle-most values. Otherwise the
* median is the middle-most value.
*/
if (length % 2 === 0) {
var midUpper = length / 2;
var midLower = midUpper - 1;
return (array[midUpper] + array[midLower]) / 2;
} else {
return array[Math.floor(length / 2)];
}
}
var options = {
title:'Box Plot',
height: 500,
legend: {position: 'none'},
hAxis: {
gridlines: {color: '#fff'}
},
lineWidth: 0,
series: [{'color': '#D3362D'}],
intervals: {
barWidth: 1,
boxWidth: 1,
lineWidth: 2,
style: 'boxes'
},
interval: {
max: {
style: 'bars',
fillOpacity: 1,
color: '#777'
},
min: {
style: 'bars',
fillOpacity: 1,
color: '#777'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('box_plot'));
chart.draw(data, options);
}