Genel bakış
Alan, Çizgi ve Karma Grafikler gibi bazı Google Listeleri, veri noktalarını birbirine bağlayan çizgilere sahiptir. Bu sayfadaki teknikleri kullanarak çizgilerin rengini, kalınlığını ve kısa çizgisini özelleştirebilirsiniz.
Rengi Değiştirme
Google Grafikler'de veri noktalarını bağlayan çizgilerin rengini iki küçük farkla değiştirebilirsiniz: grafik paletini değiştirmek için colors seçeneği veya belirli bir serinin rengini belirtmek için series seçeneği.
Aşağıdaki grafikte her serinin rengini açıkça belirtiyoruz.
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>
Yukarıda renkler onaltılık değerle belirtilir (ör. '#e2431e' veya doymuş kırmızı için '#f00') kullanabilirsiniz. Ancak İngilizce olarak da belirtilebilir. Aşağıdaki örnek, ayrıca, tek tek serilerin renklerini ayarlamak yerine grafik paletini colors seçeneğiyle düzelterek renklerin nasıl kontrol edileceğini göstermektedir. Pamuru düzeltirseniz ve paletinizde renklerden daha fazla dizi varsa renkler yeniden kullanılır: Paletiniz kırmızı ve maviden oluşuyorsa serinin yarısı kırmızı, diğeri yarı mavidir.
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>
Kalınlığı Değiştirme
lineWidth seçeneğiyle çizgilerin kalınlığını kontrol edebilirsiniz:
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>
Bir serinin çizgi genişliğini kontrol etmek için series seçeneğini kullanın:
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>
Kısa çizgili çizgiler
Bir dizi rakam alan lineDashStyle seçeneği sayesinde kesik çizgili birçok stile erişilebilir. İlk sayı kısa çizginin uzunluğunu, ikincisi de kısa çizgiden sonraki boşluğu gösterir. Üçüncü sayı varsa bir sonraki kısa çizginin uzunluğu, dördüncü sayıysa bir sonraki boşluğun uzunluğudur.
Grafik çizildiğinde bu uzunluklar tekrarlandığı için [4,
4] art arda 4-kısa çizgi ve 4 uzunluklu boşluklar bırakır. [5, 1, 3]; 5 karakterli kısa çizgi, 1 uzunluklu boşluk, 3 uzun çizgi, 5
uzunluk boşluğu vb. anlamına gelir. Bazı örnekler:
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>