مخططات الفرق

• Overview
• أمثلة
  • الرسومات البيانية للنقاط المبعثرة
  • الرسومات البيانية الدائرية المختلفة
  • الرسوم البيانية العمودية وشريط الفارق

نظرة عامة

مخطط الاختلاف هو مخطط تم تصميمه لإبراز الاختلافات بين مخططين ببيانات قابلة للمقارنة. من خلال إبراز التغييرات بين القيم التناظرية، يمكن أن تكشف عن الاختلافات بين مجموعات البيانات.

يمكنك إنشاء رسم بياني للفرق من خلال استدعاء الطريقة computeDiff مع مجموعتَي بيانات لإنشاء مجموعة بيانات ثالثة تمثّل الفرق، ثم رسمها.

تتوفّر الرسوم البيانية المختلفة للرسومات البيانية الشريطية والرسوم البيانية العمودية والرسوم البيانية الدائرية والرسوم البيانية المبعثرة.

أمثلة

سترى في هذا القسم أمثلة وعينات تعليمات برمجية لكل نوع من أنواع مخططات الاختلافات.

الرسومات البيانية للنقاط المبعثرة المختلفة

لتوضيح مخطط تبعثر الاختلاف، لنأخذ في الاعتبار تجربتين، تقارن كل منهما بين دواء. في ما يلي نتائج التجربتَين ومخطط الاختلافات الناتج:

إذا نظرت إلى هذين المخططين، فيمكنك معرفة أن شيئًا ما قد تغير، ولكن من الصعب أن تعرف بالضبط. يوضح مخطط التبعثر الفرق توضيحًا من خلال عرض مسار كل نقطة بيانات.

في ما يلي الخطوط الرئيسية التي تنشئ الرسوم البيانية الثلاثة أعلاه:

// Create the three charts: before, after, and diff.
var chartBefore = new google.visualization.ScatterChart(document.getElementById('chart_before_div'));
var chartAfter = new google.visualization.ScatterChart(document.getElementById('chart_after_div'));
var chartDiff = new google.visualization.ScatterChart(document.getElementById('chart_diff_div'));

// Draw the before and after charts.
chartBefore.draw(oldData);
chartAfter.draw(newData);

// Draw the diff chart.
var diffData = chartDiff.computeDiff(oldData, newData);
chartDiff.draw(diffData);

يمكنك تغيير تعتيم الطرفَين باستخدام الخيار diff.oldData.opacity، وتعتيم نقاط البيانات الجديدة باستخدام الخيار diff.newData.opacity:

الرسوم البيانية الدائرية المختلفة

في ما يلي الرمز لإنشاء جميع المخططات الثلاثة:

  <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 oldData = google.visualization.arrayToDataTable([
      ['Major', 'Degrees'],
      ['Business', 256070], ['Education', 108034],
      ['Social Sciences & History', 127101], ['Health', 81863],
      ['Psychology', 74194]]);

    var newData = google.visualization.arrayToDataTable([
      ['Major', 'Degrees'],
      ['Business', 358293], ['Education', 101265],
      ['Social Sciences & History', 172780], ['Health', 129634],
      ['Psychology', 97216]]);

    var options = { pieSliceText: 'none' };

    var chartBefore = new google.visualization.PieChart(document.getElementById('piechart_before'));
    var chartAfter = new google.visualization.PieChart(document.getElementById('piechart_after'));
    var chartDiff = new google.visualization.PieChart(document.getElementById('piechart_diff'));

    chartBefore.draw(oldData, options);
    chartAfter.draw(newData, options);

    var diffData = chartDiff.computeDiff(oldData, newData);
    chartDiff.draw(diffData, options);
  }
</script>
<span id='piechart_before' style='width: 450px; display: inline-block'></span>
<span id='piechart_after' style='width: 450px; display: inline-block'></span>
<br>
<span id='piechart_diff' style='width: 450px; position: absolute; left: 250px'></span>

ويمكنك التحكّم في الحجم النسبي للدوائر باستخدام diff.innerCircle.radiusFactor، والحدّ البيني للدوائر باستخدام diff.innerCircle.borderFactor، وشفافية كل منها باستخدام diff.oldData.opacity وdiff.newData.opacity. وأخيرًا، يمكنك عكس السلوك بحيث تحيط البيانات الأقدم بأحدث البيانات باستخدام diff.oldData.inCenter. مثال على كل منها:

الرسوم البيانية العمودية والفرق الفارقة

تقوم مخططات شريط الفرق ومخططات عمود الاختلاف بتراكب البيانات الجديدة فوق البيانات القديمة. هنا، نأخذ مخططين عموديين بسيطين - أحدهما للبيانات القديمة، والآخر جديد - ونفرق بينهما:

للحصول على مثال أكثر تعقيدًا، دعونا نلقي نظرة على كيفية تغير شعبية بعض الأسماء (لا سيما أسماء المتدربين الصيفيين في مؤثرات عرض التصور من Google) من ثمانينيات القرن العشرين إلى الوقت الحاضر (الأرقام لكل ملايين من الأطفال، مقدمة من اسم الطفل السحري).

التعليمات البرمجية لإنشاء جميع المخططات الأربعة:

  <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 oldData = google.visualization.arrayToDataTable([
      ['Name', 'Popularity'],
      ['Cesar', 250],
      ['Rachel', 4200],
      ['Patrick', 2900],
      ['Eric', 8200]
    ]);

    var newData = google.visualization.arrayToDataTable([
      ['Name', 'Popularity'],
      ['Cesar', 370],
      ['Rachel', 600],
      ['Patrick', 700],
      ['Eric', 1500]
    ]);

    var colChartBefore = new google.visualization.ColumnChart(document.getElementById('colchart_before'));
    var colChartAfter = new google.visualization.ColumnChart(document.getElementById('colchart_after'));
    var colChartDiff = new google.visualization.ColumnChart(document.getElementById('colchart_diff'));
    var barChartDiff = new google.visualization.BarChart(document.getElementById('barchart_diff'));

    var options = { legend: { position: 'top' } };

    colChartBefore.draw(oldData, options);
    colChartAfter.draw(newData, options);

    var diffData = colChartDiff.computeDiff(oldData, newData);
    colChartDiff.draw(diffData, options);
    barChartDiff.draw(diffData, options);
  }
</script>

<span id='colchart_before' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='colchart_after' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='colchart_diff' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='barchart_diff' style='width: 450px; height: 250px; display: inline-block'></span>

يتيح لك العمودان المختلفان والمخططات الشريطية التحكّم في العرض النسبي للشريطَين القديم والجديد باستخدام الخيار diff.newData.widthFactor: