개요
영역, 선, 콤보 차트와 같은 일부 Google 차트에는 데이터 포인트를 연결하는 선이 있습니다. 이 페이지의 기법을 사용하여 선의 색상, 두께, 파선을 맞춤설정할 수 있습니다.
색상 변경
Google 차트의 데이터 포인트를 연결하는 선의 색상은 colors 옵션을 사용하여 차트 팔레트를 변경하거나 series 옵션을 사용하여 특정 계열의 색상을 지정하는 두 가지 방법으로 변경할 수 있습니다.
다음 차트에서는 각 계열의 색상을 명시적으로 설정합니다.
var options = {
legend: 'none',
series: {
0: { color: '#e2431e' },
1: { color: '#e7711b' },
2: { color: '#f1ca3a' },
3: { color: '#6f9654' },
4: { color: '#1c91c0' },
5: { color: '#43459d' },
}
};
<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 = google.visualization.arrayToDataTable
([['X', '1', '2', '3', '4', '5', '6'],
[1, 2, 3, 4, 5, 6, 7],
[2, 3, 4, 5, 6, 7, 8],
[3, 4, 5, 6, 7, 8, 9],
[4, 5, 6, 7, 8, 9, 10],
[5, 6, 7, 8, 9, 10, 11],
[6, 7, 8, 9, 10, 11, 12]
]);
var options = {
legend: 'none',
series: {
0: { color: '#e2431e' },
1: { color: '#e7711b' },
2: { color: '#f1ca3a' },
3: { color: '#6f9654' },
4: { color: '#1c91c0' },
5: { color: '#43459d' },
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
위에서 색상은 16진수 값으로 지정됩니다(예: '#e2431e' 또는 진한 빨간색의 경우 '#f00')를 지정할 수 있지만 영어 이름으로도 지정할 수 있습니다. 다음 예는 이를 보여주며, 개별 계열의 색상을 설정하는 대신 colors 옵션으로 차트 팔레트를 수정하여 색상을 제어하는 방법을 보여줍니다. 한 가지 차이점은 팔레트를 수정하고 팔레트에 색상보다 계열이 더 많으면 색상이 재사용된다는 점입니다. 팔레트가 빨간색과 파란색으로 구성되어 있으면 계열의 절반은 빨간색이 되고 나머지 절반은 파란색이 됩니다.
var options = {
legend: 'none',
colors: ['black', 'blue', 'red', 'green', 'yellow', 'gray']
};
<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 = google.visualization.arrayToDataTable
([['X', '1', '2', '3', '4', '5', '6'],
[1, 2, 3, 4, 5, 6, 7],
[2, 3, 4, 5, 6, 7, 8],
[3, 4, 5, 6, 7, 8, 9],
[4, 5, 6, 7, 8, 9, 10],
[5, 6, 7, 8, 9, 10, 11],
[6, 7, 8, 9, 10, 11, 12]
]);
var options = {
legend: 'none',
colors: ['black', 'blue', 'red', 'green', 'yellow', 'gray']
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
두께 변경
lineWidth 옵션을 사용하여 선의 두께를 제어할 수 있습니다.
var options = {
legend: 'none',
hAxis: { maxValue: 7 },
vAxis: { maxValue: 13 },
lineWidth: 10,
colors: ['#e2431e', '#d3362d', '#e7711b',
'#e49307', '#e49307', '#b9c246']
};
<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 = google.visualization.arrayToDataTable
([['X', '1', '2', '3', '4', '5', '6'],
[1, 2, 3, 4, 5, 6, 7],
[2, 3, 4, 5, 6, 7, 8],
[3, 4, 5, 6, 7, 8, 9],
[4, 5, 6, 7, 8, 9, 10],
[5, 6, 7, 8, 9, 10, 11],
[6, 7, 8, 9, 10, 11, 12]
]);
var options = {
legend: 'none',
hAxis: { maxValue: 7 },
vAxis: { maxValue: 13 },
lineWidth: 10,
colors: ['#e2431e', '#d3362d', '#e7711b',
'#e49307', '#e49307', '#b9c246']
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
계열의 선 너비를 제어하려면 series 옵션을 사용하세요.
var options = {
legend: 'none',
hAxis: { maxValue: 7 },
vAxis: { maxValue: 13 },
series: {
0: { lineWidth: 1 },
1: { lineWidth: 2 },
2: { lineWidth: 4 },
3: { lineWidth: 8 },
4: { lineWidth: 16 },
5: { lineWidth: 24 }
},
colors: ['#e2431e', '#d3362d', '#e7711b',
'#e49307', '#e49307', '#b9c246']
};
<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 = google.visualization.arrayToDataTable
([['X', '1', '2', '3', '4', '5', '6'],
[1, 2, 3, 4, 5, 6, 7],
[2, 3, 4, 5, 6, 7, 8],
[3, 4, 5, 6, 7, 8, 9],
[4, 5, 6, 7, 8, 9, 10],
[5, 6, 7, 8, 9, 10, 11],
[6, 7, 8, 9, 10, 11, 12]
]);
var options = {
legend: 'none',
hAxis: { maxValue: 7 },
vAxis: { maxValue: 13 },
series: {
0: { lineWidth: 1 },
1: { lineWidth: 2 },
2: { lineWidth: 4 },
3: { lineWidth: 8 },
4: { lineWidth: 16 },
5: { lineWidth: 24 }
},
colors: ['#e2431e', '#d3362d', '#e7711b',
'#e49307', '#e49307', '#b9c246']
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
점선
숫자 배열을 사용하는 lineDashStyle 옵션을 통해 다양한 점선 스타일을 적용할 수 있습니다. 첫 번째 숫자는 대시의 길이를 나타내고, 두 번째 숫자는 대시 뒤의 간격을 나타냅니다. 세 번째 숫자가 있으면 그것은 다음 대시의 길이이고 네 번째 숫자(있는 경우)는 다음 간격의 길이입니다.
차트를 그릴 때 이 길이가 반복되므로 [4,
4]은 4개의 길이 대시와 4개의 길이가 연속된 간격을 의미합니다. [5, 1, 3]는 5개의 대시, 1개의 길이의 대시, 3개의 길이의 대시, 5개의 길이의 대시 등을 의미합니다. 예를 들면 다음과 같습니다.
var options = {
hAxis: { maxValue: 10 },
vAxis: { maxValue: 18 },
chartArea: { width: 380 },
lineWidth: 4,
series: {
0: { lineDashStyle: [1, 1] },
1: { lineDashStyle: [2, 2] },
2: { lineDashStyle: [4, 4] },
3: { lineDashStyle: [5, 1, 3] },
4: { lineDashStyle: [4, 1] },
5: { lineDashStyle: [10, 2] },
6: { lineDashStyle: [14, 2, 7, 2] },
7: { lineDashStyle: [14, 2, 2, 7] },
8: { lineDashStyle: [2, 2, 20, 2, 20, 2] }
},
colors: ['#e2431e', '#f1ca3a', '#6f9654', '#1c91c0',
'#4374e0', '#5c3292', '#572a1a', '#999999', '#1a1a1a'],
};
<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 = google.visualization.arrayToDataTable
([['X', 'lineDashStyle: [1, 1]', 'lineDashStyle: [2, 2]',
'lineDashStyle: [4, 4]', 'lineDashStyle: [5, 1, 3]',
'lineDashStyle: [4, 1]',
'lineDashStyle: [10, 2]', 'lineDashStyle: [14, 2, 7, 2]',
'lineDashStyle: [14, 2, 2, 7]',
'lineDashStyle: [2, 2, 20, 2, 20, 2]'],
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
[3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
[4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
[5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
[6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
[7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
[8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
[9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
]);
var options = {
hAxis: { maxValue: 10 },
vAxis: { maxValue: 18 },
chartArea: { width: 380 },
lineWidth: 4,
series: {
0: { lineDashStyle: [1, 1] },
1: { lineDashStyle: [2, 2] },
2: { lineDashStyle: [4, 4] },
3: { lineDashStyle: [5, 1, 3] },
4: { lineDashStyle: [4, 1] },
5: { lineDashStyle: [10, 2] },
6: { lineDashStyle: [14, 2, 7, 2] },
7: { lineDashStyle: [14, 2, 2, 7] },
8: { lineDashStyle: [2, 2, 20, 2, 20, 2] }
},
colors: ['#e2431e', '#f1ca3a', '#6f9654', '#1c91c0',
'#4374e0', '#5c3292', '#572a1a', '#999999', '#1a1a1a'],
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>