ওভারভিউ
অনেক Google চার্টে, ডেটা মানগুলি সুনির্দিষ্ট পয়েন্টে প্রদর্শিত হয়। একটি লাইন চার্ট হল লাইন দ্বারা সংযুক্ত এই পয়েন্টগুলির একটি সেট এবং একটি স্ক্যাটার চার্ট বিন্দু ছাড়া আর কিছুই নয়।
স্ক্যাটার চার্ট ছাড়া সমস্ত চার্টে, এই পয়েন্টগুলি ডিফল্টরূপে শূন্য আকারের। আপনি পয়েন্ট pointShape বিকল্পের মাধ্যমে তাদের আকার এবং pointSize বিকল্পের মাধ্যমে তাদের আকার নিয়ন্ত্রণ করতে পারেন।
উপরে, আপনি ছয়টি সিরিজের একটি চার্ট দেখতে পারেন, প্রতিটিতে pointShape pointSize
var options = {
legend: 'none',
hAxis: { minValue: 0, maxValue: 7 },
pointSize: 30,
series: {
0: { pointShape: 'circle' },
1: { pointShape: 'triangle' },
2: { pointShape: 'square' },
3: { pointShape: 'diamond' },
4: { pointShape: 'star' },
5: { pointShape: 'polygon' }
}
};
<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, null, null, null, null, null],
[2, null, 3, null, null, null, null],
[3, null, null, 4, null, null, null],
[4, null, null, null, 5, null, null],
[5, null, null, null, null, 6, null],
[6, null, null, null, null, null, 7]
]);
var options = {
legend: 'none',
pointSize: 30,
series: {
0: { pointShape: 'circle' },
1: { pointShape: 'triangle' },
2: { pointShape: 'square' },
3: { pointShape: 'diamond' },
4: { pointShape: 'star' },
5: { pointShape: 'polygon' }
}
};
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>
কিছু সহজ উদাহরণ
পূর্ববর্তী বিভাগে চার্টের বিপরীতে, বেশিরভাগ চার্টে শুধুমাত্র একটি সিরিজ আছে। এখানে 20pt বৃত্তাকার পয়েন্ট সহ একটি লাইন চার্টের একটি উদাহরণ:
যেহেতু ডিফল্ট pointShape হল বৃত্ত, আমরা এটিকে বিকল্পগুলির বাইরে রেখে দিতে পারি:
var options = {
legend: 'none',
hAxis: { minValue: 0, maxValue: 9 },
curveType: 'function',
pointSize: 20,
};
<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', 'Y'],
[1, 3],
[2, 2.5],
[3, 3],
[4, 4],
[5, 4],
[6, 3],
[7, 2.5],
[8, 3]
]);
var options = {
legend: 'none',
hAxis: { minValue: 0, maxValue: 9 },
curveType: 'function',
pointSize: 20,
};
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>
আপনি pointShape "ত্রিভুজ", "বর্গক্ষেত্র", "হীরা", "তারকা" বা "বহুভুজ" এ সেট করে এটিকে "বৃত্ত" থেকে অন্য আকারে পরিবর্তন করতে পারেন:
var options = {
legend: 'none',
hAxis: { minValue: 0, maxValue: 9 },
colors: ['#795548'],
pointSize: 20,
pointShape: 'square'
};
<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', 'Y'],
[1, 3],
[2, 2.5],
[3, 3],
[4, 4],
[5, 4],
[6, 3],
[7, 2.5],
[8, 3]
]);
var options = {
legend: 'none',
hAxis: { minValue: 0, maxValue: 9 },
colors: ['#795548'],
pointSize: 20,
pointShape: 'square'
};
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>
'তারকা' এবং 'বহুভুজ' আকারগুলি আপনাকে পক্ষের সংখ্যা কাস্টমাইজ করতে দেয়, উভয়ই ডিফল্ট পাঁচে। কিছু চার দিকের তারা:
var options = {
legend: 'none',
hAxis: { minValue: 0, maxValue: 9 },
colors: ['#EF851C'],
pointSize: 30,
pointShape: { type: 'star', sides: 4 }
};
<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', 'Y'],
[1, 3],
[2, 2.5],
[3, 3],
[4, 4],
[5, 4],
[6, 3],
[7, 2.5],
[8, 3]
]);
var options = {
legend: 'none',
hAxis: { minValue: 0, maxValue: 9 },
colors: ['#EF851C'],
pointSize: 30,
pointShape: { type: 'star', sides: 4 }
};
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>
নক্ষত্রগুলিকে dent বিকল্পের সাহায্যে আরও কাস্টমাইজ করা যেতে পারে, যা নক্ষত্রটি কতটা অবতল তা নিয়ন্ত্রণ করে। যখন ডেন্টটি শূন্যের কাছাকাছি থাকে, তখন তারাটি তারামাছ-সদৃশ হবে; ডেন্টটি একটির কাছে যাওয়ার সাথে সাথে এটি একটি সমবাহু বহুভুজ অতিক্রম করবে।
এখানে পাঁচ পার্শ্বযুক্ত তারার জন্য 0.05 থেকে 0.8 পর্যন্ত ডেন্ট রয়েছে:
var options = {
legend: 'none',
hAxis: { textPosition: 'none' },
vAxis: { textPosition: 'none', gridlines: { count: 0 },
baselineColor: 'white' },
colors: ['#E94D20', '#ECA403', '#63A74A',
'#15A0C8', '#4151A3', '#703593', '#981B48'],
pointSize: 20,
annotations: { stemColor: 'white', textStyle: { fontSize: 16 } },
series: {
0: { pointShape: { type: 'star', sides: 5, dent: 0.05 } },
1: { pointShape: { type: 'star', sides: 5, dent: 0.1 } },
2: { pointShape: { type: 'star', sides: 5, dent: 0.2 } },
3: { pointShape: { type: 'star', sides: 5 } },
4: { pointShape: { type: 'star', sides: 5, dent: 0.5 } },
5: { pointShape: { type: 'star', sides: 5, dent: 0.7 } },
6: { pointShape: { type: 'star', sides: 5, dent: 0.8 } },
}
};
<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('string', 'Element');
data.addColumn('number', 'A');
data.addColumn( { type: 'string', role: 'annotation' });
data.addColumn('number', 'B');
data.addColumn( { type: 'string', role: 'annotation' });
data.addColumn('number', 'C');
data.addColumn( { type: 'string', role: 'annotation' });
data.addColumn('number', 'D');
data.addColumn( { type: 'string', role: 'annotation' });
data.addColumn('number', 'E');
data.addColumn( { type: 'string', role: 'annotation' });
data.addColumn('number', 'F');
data.addColumn( { type: 'string', role: 'annotation' });
data.addColumn('number', 'G');
data.addColumn( { type: 'string', role: 'annotation' });
data.addRow(['A', 1, "dent: 0.05", , , , , , , , , , , , null]);
data.addRow(['B', , , 1, "dent: 0.1", , , , , , , , , , null]);
data.addRow(['C', , , , , 1, "dent: 0.2", , , , , , , , null]);
data.addRow(['D', , , , , , , 1, "default", , , , , , null]);
data.addRow(['E', , , , , , , , , 1, "dent: 0.5", , , , null]);
data.addRow(['F', , , , , , , , , , , 1, "dent: 0.7", , null]);
data.addRow(['G', , , , , , , , , , , , , 1, "dent: 0.8"]);
var options = {
legend: 'none',
hAxis: { textPosition: 'none' },
vAxis: { textPosition: 'none', gridlines: { count: 0 },
baselineColor: 'white' },
colors: ['#E94D20', '#ECA403', '#63A74A',
'#15A0C8', '#4151A3', '#703593', '#981B48'],
pointSize: 20,
annotations: { stemColor: 'white', textStyle: { fontSize: 16 } },
series: {
0: { pointShape: { type: 'star', sides: 5, dent: 0.05 } },
1: { pointShape: { type: 'star', sides: 5, dent: 0.1 } },
2: { pointShape: { type: 'star', sides: 5, dent: 0.2 } },
3: { pointShape: { type: 'star', sides: 5 } },
4: { pointShape: { type: 'star', sides: 5, dent: 0.5 } },
5: { pointShape: { type: 'star', sides: 5, dent: 0.7 } },
6: { pointShape: { type: 'star', sides: 5, dent: 0.8 } },
}
};
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>
ঘূর্ণন
সমস্ত বিন্দু আকার rotation বিকল্প সঙ্গে ঘোরানো যেতে পারে, ডিগ্রী নির্দিষ্ট. উদাহরণস্বরূপ, আমরা আমাদের ত্রিভুজগুলিকে 180 ডিগ্রি ঘোরানোর মাধ্যমে নীচের এরিয়া চার্টে নীচের দিকে নির্দেশ করতে পারি:
var options = {
legend: 'none',
colors: ['#15A0C8'],
pointSize: 30,
pointShape: { type: 'triangle', rotation: 180 }
};
<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', 'Y'],
[1, 3],
[2, 2.5],
[3, 2],
[4, 3],
[5, 4.5],
[6, 6.5],
[7, 9],
[8, 12]
]);
var options = {
legend: 'none',
colors: ['#15A0C8'],
pointSize: 30,
pointShape: { type: 'triangle', rotation: 180 }
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
পৃথক পয়েন্ট কাস্টমাইজ করা
ডিফল্টরূপে, একটি বিন্দুতে প্রয়োগ করা শৈলী সিরিজের সমস্ত পয়েন্টে প্রযোজ্য। আপনি যদি একটি নির্দিষ্ট ডেটা পয়েন্টের চেহারা পরিবর্তন করতে চান তবে আপনি এটি স্টাইল করে তা করতে পারেন।
নিম্নলিখিত চার্টে, আমরা একটি বিন্দুর আকার বাড়াই, অস্বচ্ছতা কমিয়ে 0.3 করি এবং আকৃতি এবং রঙ পরিবর্তন করি:
<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', 'Y', {'type': 'string', 'role': 'style'}],
[1, 3, null],
[2, 2.5, null],
[3, 3, null],
[4, 4, null],
[5, 4, null],
[6, 3, 'point { size: 18; shape-type: star; fill-color: #a52714; }'],
[7, 2.5, null],
[8, 3, null]
]);
var options = {
legend: 'none',
hAxis: { minValue: 0, maxValue: 9 },
curveType: 'function',
pointSize: 7,
dataOpacity: 0.3
};
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>
নিম্নলিখিত শৈলী কাস্টমাইজেশন উপলব্ধ:
-
fill-color(একটি হেক্স স্ট্রিং হিসাবে নির্দিষ্ট।) -
shape-dent -
shape-rotation -
shape-sides -
shape-type -
stroke-color(একটি হেক্স স্ট্রিং হিসাবে নির্দিষ্ট।) -
stroke-width(একটি হেক্স স্ট্রিং হিসাবে নির্দিষ্ট।) -
size -
visible(বিন্দুটি দৃশ্যমান কিনা।)
অপাসিটি একটি শৈলীর মাধ্যমে নয়, dataOpacity বিকল্পের মাধ্যমে নিয়ন্ত্রিত হয়।