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

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

نظرة عامة

المخطط المميز هو مخطط تم تصميمه لإبراز الاختلافات بين مخططين مع بيانات قابلة للمقارنة. ومن خلال تسليط الضوء على التغييرات بين القيم المماثلة، يمكنهم الكشف عن اختلافات بين مجموعات البيانات.

يمكنك إنشاء رسم بياني للاختلاف عن طريق استدعاء الطريقة 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: