نظرة عامة
في العديد من مخططات Google، يتم عرض قيم البيانات عند نقاط دقيقة. المخطط الخطي هو مجرد مجموعة من هذه النقاط المتصلة بخطوط، والمخطط المبعثر ليس سوى نقاط.
في جميع المخططات باستثناء المخطط المبعثر، تكون هذه النقاط ذات حجم صفري افتراضيًا. يمكنك التحكّم في حجمها باستخدام خيار "pointSize
"،
وشكلها من خلال خيار "pointShape
".
أعلاه، يمكنك الاطّلاع على رسم بياني يحتوي على ست سلاسل، كل منها يحتوي على pointSize
30 ولكن pointShape
مختلف.
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>
بعض الأمثلة البسيطة
على عكس المخطط في القسم السابق، تحتوي معظم المخططات على سلسلة واحدة فقط. إليك مثال على مخطط خطي به نقاط دائرية 20 نقطة:
ولأنّ 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
.