نظرة عامة
تدعم مخططات 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>