ওভারভিউ
কিছু 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>
উপরে, রঙগুলি হেক্স মান দ্বারা নির্দিষ্ট করা হয়েছে (যেমন, '#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>