نظرة عامة
تتوافق مخططات Google مع ثلاثة أنواع من خطوط الاتجاه: الخطية، ومتعددة الحدود، والأسية.
خطوط الاتجاه الخطية
خط الاتجاه
في المخطط أدناه، يمكنك مشاهدة خط اتجاه خطي على مخطط مبعثر يقارن عمر قيقب السكر بقطر جذورها. يمكنك تمرير مؤشر الماوس فوق خط الاتجاه للاطلاع على المعادلة التي تحسبها مخططات Google: 4.885 مضروبًا في القطر + 0.730.
لرسم خط اتجاه على رسم بياني، استخدِم الخيار trendlines وحدِّد سلسلة البيانات المطلوب استخدامها:
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Diameter', 'Age'],
[8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]]);
var options = {
title: 'Age of sugar maples vs. trunk diameter, in inches',
hAxis: {title: 'Diameter'},
vAxis: {title: 'Age'},
legend: 'none',
trendlines: { 0: {} } // Draw a trendline for data series 0.
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
خطوط الاتجاه الخطية هي النوع الأكثر شيوعًا من خطوط الاتجاه. ولكن في بعض الأحيان يكون المنحنى هو الأفضل لوصف البيانات، ولذلك سنحتاج إلى نوع آخر من خطوط الاتجاه.
خطوط الاتجاه الأسية
إذا كنت تفسّر بياناتك بالشكل الأفضل باستخدام الأس
من النموذج eax+b، يمكنك استخدام السمة type
لتحديد خط اتجاه
ملاحظة: على عكس خطوط الاتجاه الخطية، هناك عدة طرق مختلفة لحساب خطوط الاتجاه الأسي. نحن نقدم طريقة واحدة فقط في الوقت الحالي، ولكننا سندعم المزيد في المستقبل، ولذلك من الممكن أن يتغير اسم خط الاتجاه الأسي الحالي أو سلوكه.
وبالنسبة إلى هذا المخطط، نستخدم أيضًا visibleInLegend: true لعرض المنحنى الأسي في وسيلة الإيضاح.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Generation', 'Descendants'],
[0, 1], [1, 33], [2, 269], [3, 2013]
]);
var options = {
title: 'Descendants by Generation',
hAxis: {title: 'Generation', minValue: 0, maxValue: 3},
vAxis: {title: 'Descendants', minValue: 0, maxValue: 2100},
trendlines: {
0: {
type: 'exponential',
visibleInLegend: true,
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div2'));
chart.draw(data, options);
}
تغيير اللون
يتم تلوين خطوط الاتجاهات بشكل تلقائي بنفس لون سلسلة البيانات، لكن تكون أخف وزنًا. ويمكنك إلغاء هذه القيمة باستخدام السمة color.
ننشئ هنا مخططًا لعدد الأرقام من π تم حسابها حسب السنة خلال فترة مثمرة حسابيًا، مع تلوين خط الاتجاه الأسي.
وإليك مواصفات خطوط الاتجاه:
trendlines: {
0: {
type: 'exponential',
color: 'green',
}
}
خطوط الاتجاه المتعددة الحدود
لإنشاء خط اتجاه متعدد الحدود، حدّد
النوع polynomial وdegree. يُرجى توخي الحذر
لأنها قد تؤدي في بعض الأحيان إلى نتائج مضللة. في المثال التالي، حيث يتم تمثيل مجموعة بيانات خطية تقريبًا بخط اتجاه مكعب (درجة 3):
تجدر الإشارة إلى أن الهبوط بعد نقطة البيانات الأخيرة مرئي فقط لأننا قد وسّعنا المحور الأفقي ليصبح 15. بدون ضبط hAxis.maxValue على 15، سيبدو كما يلي:
البيانات نفسها وحدود متعددة الحدود ونافذة مختلفة للبيانات.
var options = {
title: 'Age vs. Weight comparison',
legend: 'none',
crosshair: { trigger: "both", orientation: "both" },
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
}
}
};
<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([
['Age', 'Weight'],
[ 8, 12],
[ 4, 5.5],
[ 11, 14],
[ 4, 5],
[ 3, 3.5],
[ 6.5, 7]
]);
var options = {
title: 'Age vs. Weight comparison',
legend: 'none',
crosshair: { trigger: 'both', orientation: 'both' },
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('polynomial2_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id='polynomial2_div' style='width: 900px; height: 500px;'></div>
</body>
</html>
تغيير التعتيم وعرض الخط
يمكنك تغيير شفافية خط الاتجاه عن طريق تعيين opacity على قيمة بين 0.0 و1.0 وعرض الخط من خلال تعيين الخيار lineWidth.
trendlines: {
0: {
color: 'purple',
lineWidth: 10,
opacity: 0.2,
type: 'exponential'
}
}
سيكون الخيار lineWidth كافيًا لمعظم الاستخدامات، ولكن إذا أعجبك الشكل، يمكنك استخدام خيار pointSize الذي يمكن استخدامه لتخصيص حجم النقاط القابلة للتحديد داخل خط الاتجاه:
تمامًا مثل الضوء في صورة موجة وجسيم مثلاً، يكون خط الاتجاه خطًا ومجموعة من النقاط. يعتمد ما يشاهده المستخدمون على كيفية تفاعلهم مع الخط: عادةً يكون خطًا، ولكن عند تمرير مؤشر الماوس فوق خط الاتجاه، سيتم تمييز نقطة معينة. سيكون قطر هذه النقطة يساوي:
- خط الاتجاه
pointSizeإذا كان محددًا، وإلا... pointSizeالعالمية إذا تم تحديدها، وإلا...- 7
ومع ذلك، في حال ضبط الخيار "عالمي" أو خيار "خط الاتجاه" pointSize، سيتم عرض جميع النقاط القابلة للاختيار، بشكل مستقل عن lineWidthخط الاتجاه.
var options = {
legend: 'none',
hAxis: { ticks: [] },
vAxis: { ticks: [] },
pointShape: 'diamond',
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
pointSize: 20, // Set the size of the trendline dots.
opacity: 0.1
}
}
};
<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'],
[0, 4],
[1, 2],
[2, 4],
[3, 6],
[4, 4]
]);
var options = {
legend: 'none',
hAxis: { ticks: [] },
vAxis: { ticks: [] },
colors: ['#703583'],
pointShape: 'diamond',
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
pointSize: 20, // Set the size of the trendline dots.
opacity: 0.1
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_pointSize'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_pointSize" style="width: 900px; height: 500px;"></div>
</body>
</html>
إبراز النقاط
يتم حصر خطوط الاتجاه عن طريق ختم مجموعة من النقاط على المخطط. يحدّد الخيار pointsVisible
في خط الاتجاه ما إذا كانت النقاط الخاصة بخط اتجاه معيّن
مرئية أم لا. إنّ الخيار التلقائي لجميع خطوط الاتجاه هو true، ولكن إذا أردت إيقاف
إمكانية رؤية نقطة خط الاتجاه الأول، اضبط
trendlines.0.pointsVisible: false.
يوضح الرسم البياني أدناه التحكم في مستوى رؤية النقاط على أساس كل خط من خطوط الاتجاه.
var options = {
height: 500,
legend: 'none',
colors: ['#9575cd', '#33ac71'],
pointShape: 'diamond',
trendlines: {
0: {
type: 'exponential',
pointSize: 20,
opacity: 0.6,
pointsVisible: false
},
1: {
type: 'linear',
pointSize: 10,
pointsVisible: true
}
}
};
<html>
<head>
<meta charset="utf-8"/>
<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', 'Z'],
[0, 4, 5],
[1, 2, 6],
[2, 4, 8],
[3, 6, 10],
[4, 4, 11],
[5, 8, 13],
[6, 12, 15],
[7, 15, 19],
[8, 25, 21],
[9, 34, 23],
[10, 50, 27]
]);
var options = {
height: 500,
legend: 'none',
colors: ['#9575cd', '#33ac71'],
pointShape: 'diamond',
trendlines: {
0: {
type: 'exponential',
pointSize: 20,
opacity: 0.6,
pointsVisible: false
},
1: {
type: 'linear',
pointSize: 10,
pointsVisible: true
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
تغيير التصنيف
بشكل تلقائي، إذا حددت visibleInLegend، سيكشف التصنيف معادلة خط الاتجاه. يمكنك استخدام labelInLegend لتحديد تصنيف مختلف. ونعرض هنا خط اتجاه لكل سلسلة من سلسلتين، مع تعيين العلامات في خطوط "الخلل" (لسلسلة البيانات 0) و"سطر الاختبار" (السلسلة 1).
trendlines: {
0: {
labelInLegend: 'Bug line',
visibleInLegend: true,
},
1: {
labelInLegend: 'Test line',
visibleInLegend: true,
}
}
الارتباطات
يحدد معامل التحديد، الذي يسمى R2 في الإحصاءات، مدى مطابقة خط الاتجاه للبيانات. وتكون العلاقة المثالية هي 1.0، بينما تبلغ المطابقة المثالية 0.0.
يمكنك تصوير R2 في وسيلة إيضاح الرسم البياني من خلال ضبط الخيار showR2 على true.
<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([
['Age', 'Weight'],
[ 8, 12],
[ 4, 5.5],
[ 11, 14],
[ 4, 5],
[ 3, 3.5],
[ 6.5, 7]
]);
var options = {
hAxis: {minValue: 0, maxValue: 15},
vAxis: {minValue: 0, maxValue: 15},
chartArea: {width:'50%'},
trendlines: {
0: {
type: 'linear',
showR2: true,
visibleInLegend: true
}
}
};
var chartLinear = new google.visualization.ScatterChart(document.getElementById('chartLinear'));
chartLinear.draw(data, options);
options.trendlines[0].type = 'exponential';
options.colors = ['#6F9654'];
var chartExponential = new google.visualization.ScatterChart(document.getElementById('chartExponential'));
chartExponential.draw(data, options);
}
</script>
</head>
<body>
<div id="chartLinear" style="height: 350px; width: 800px"></div>
<div id="chartExponential" style="height: 350px; width: 800px"></div>
</body>
</html>