الفواصل الزمنية

  1. Overview
  2. فواصل الأسطر
  3. فواصل الشريط
  4. الفاصلات الزمنية للمربّعات
  5. فواصل الملصقات
  6. فواصل النقاط
  7. فواصل المنطقة
  8. الجمع بين أنماط الفاصل

نظرة عامة

يمكن أن تعرض "مخططات Google" فواصل زمنية حول سلسلة. ويمكن استخدامها لتوضيح فواصل الثقة، أو القيم الدنيا والقصوى حول القيمة، أو أخذ العينات من الشريحة المئوية، أو أي شيء آخر يتطلب هامشًا متفاوتًا حول السلسلة.

هناك ستة أنماط للفاصل الزمني: الخط والشريط والمربّع والعصا والنقطة والمنطقة. سترى أدناه أمثلة على كل منها. في كل مثال، سنستخدم مجموعة البيانات نفسها، كما هو موضح هنا بدون أي فواصل زمنية:

المخطط أعلاه بسيط: يحتوي على سبع سلاسل من البيانات، جميعها متساوية في الأهمية. فيما يلي، سنفترض أن السلسلة الأولى هي السلسلة الأساسية، وتتم مقارنة السلاسل الستة الأخرى بها من خلال الفواصل.

فواصل الأسطر

تُستخدم فواصل الأسطر أحيانًا لتوضيح التباين في تجارب متعددة. في المخطط التالي، نوضح سلسلة أساسية وفواصل حولها.

 
<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('number', 'x');
        data.addColumn('number', 'values');
        data.addColumn({id:'i0', type:'number', role:'interval'});
        data.addColumn({id:'i1', type:'number', role:'interval'});
        data.addColumn({id:'i2', type:'number', role:'interval'});
        data.addColumn({id:'i2', type:'number', role:'interval'});
        data.addColumn({id:'i2', type:'number', role:'interval'});
        data.addColumn({id:'i2', type:'number', role:'interval'});
  
        data.addRows([
            [1, 100, 90, 110, 85, 96, 104, 120],
            [2, 120, 95, 130, 90, 113, 124, 140],
            [3, 130, 105, 140, 100, 117, 133, 139],
            [4, 90, 85, 95, 85, 88, 92, 95],
            [5, 70, 74, 63, 67, 69, 70, 72],
            [6, 30, 39, 22, 21, 28, 34, 40],
            [7, 80, 77, 83, 70, 77, 85, 90],
            [8, 100, 90, 110, 85, 95, 102, 110]]);
  
        // The intervals data as narrow lines (useful for showing raw source data)
        var options_lines = {
            title: 'Line intervals, default',
            curveType: 'function',
            lineWidth: 4,
            intervals: { 'style':'line' },
            legend: 'none'
        };
  
        var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
        chart_lines.draw(data, options_lines);
      }
    </script>
  </head>
  <body>
    <div id="chart_lines" style="width: 900px; height: 500px;"></div>
  </body>
</html>

في البيانات أعلاه، يبدو أنّنا أرفقنا ثلاثة معرّفات مختلفة بالسلسلة التكميلية: i0 وi2 وi3. يمكننا استخدامها لتصميم تلك السلاسل بشكل مختلف. أدناه، نعطيها ألوانًا وسمكًا مختلفة.

ملاحظة: بشكل عام، من غير المجدي إعادة استخدام المعرّفات كما وضّحنا أعلاه، إذ يتم استخدام i2 أربع مرات. هذا صحيح، لكننا قد نغير هذا السلوك في المستقبل.

الاختلاف الوحيد هو في الخيارات:

    var options_lines = {
        title: 'Line intervals, tailored',
        lineWidth: 4,
        curveType:'function',
        interval: {
            'i0': { 'style':'line', 'color':'#D3362D', 'lineWidth': 0.5 },
            'i1': { 'style':'line', 'color':'#F1CA3A', 'lineWidth': 1 },
            'i2': { 'style':'line', 'color':'#5F9654', 'lineWidth': 2 },
        },
        legend: 'none',
    };

فواصل الشريط

تنشئ فواصل الشريط أشرطة خطأ حول بياناتك. يُرسم العمودان الأول والأخير من الفاصل الزمني على شكل أشرطة عريضة موازية لمحور النطاق، ويتم رسم الأعمدة الداخلية على شكل "علامات" أقصر. تتم إضافة "عصا" لربط الأشرطة العريضة (إذا كان لهذين الشريطين القيمة نفسها، يتم عرض الشريط كنقطة ما لم يكن الخيار pointSize صفرًا).

يتم التحكّم في عرض الأشرطة الأفقية المقابلة للعمودَين الأول والأخير باستخدام intervals.barWidth، ويتم التحكّم في عرض الأشرطة الأفقية المقابلة للأعمدة الداخلية باستخدام intervals.shortBarWidth. عند حذفها، ستحصل على مخطط مثل المخطط أعلاه مع الخيارات أدناه:

    var options_bars = {
        title: 'Bars, default',
        curveType: 'function',
        series: [{'color': '#D9544C'}],
        intervals: { style: 'bars' },
        legend: 'none',
    };

فواصل المربع

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

في ما يلي كيفية تحديد الفواصل الزمنية للمربّعات:

    var options = {
        series: [{'color': '#1A8763'}],
        intervals: { style: 'boxes' },
        legend: 'none',
    };

يمكنك جعل المربّعات أكثر بروزًا باستخدام الخيارَين intervals.lineWidth وintervals.barWidth:

الخيارات ذات الصلة:

    var options = {
        title:'Boxes, thick',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#1A8763'}],
        intervals: { 'lineWidth':2, 'barWidth': 0.5, style: 'boxes' },
        legend: 'none',
    };

فواصل الملصقات

تعرض الفواصل الزمنية اللاصقة أزواجًا من الأعمدة كمجموعة من العصي موازية للمحور المستهدف. يتم عرض ذراع ذات ارتفاع صفري كنقطة، ويمكن منعها من خلال ضبط الخيار pointSize على صفر.

يمكنك إنشاء هذه العناصر باستخدام style من 'sticks':

    var options_sticks = {
        title:'Sticks, default',
        curveType:'function',
        series: [{'color': '#E7711B'}],
        intervals: { style: 'sticks' },
        legend: 'none',
    };

فاصلات النقاط

تعرض فواصل النقاط بيانات الفواصل على شكل دوائر صغيرة:

يمكن التحكّم في حجم النقاط باستخدام الخيار intervals.pointSize. إليك 2:

    var options_points = {
        title:'Points, default',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#D3362D'}],
        intervals: { 'style':'points', pointSize: 2 },
        legend: 'none',
    };

هكذا يبدو الوقت عند الساعة 8:

فواصل المنطقة

يعرض الفاصل الزمني للمنطقة بيانات الفاصل الزمني كمجموعة من المناطق المظلّلة المتداخلة. يشبه تداخل أزواج الأعمدة ذلك الفواصل الزمنية الصندوقية، باستثناء أنه يلزم وجود عدد زوجي من الأعمدة.

يتم تحقيق ذلك من خلال ضبط style على 'area': 

    var options = {
        title:'Area, default',
        curveType:'function',
        series: [{'color': '#F1CA3A'}],
        intervals: { 'style':'area' },
        legend: 'none',
    };

الجمع بين أنماط الفاصل الزمني

لمزيد من التخصيص، يمكنك دمج أنماط الفواصل داخل مخطط واحد.

في ما يلي مخطط يجمع بين الفواصل الزمنية المساحية والشريطية:

في الرسم البياني أعلاه، نحدد style من 'bars' للفواصل الزمنية التي تحمل العلامة i0 وi1، والنمط 'area' لـ i2. ثم نستخدم pointSize لتحديد مستوى الأشرطة:

    var options = {
        title:'Bar/area interval chart',
        curveType:'function',
        intervals: { 'color':'series-color' },
        interval: {
            'i0': { 'color': '#4374E0', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 },
            'i1': { 'color': '#E49307', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 },
            'i2': { 'style':'area', 'curveType':'function', 'fillOpacity':0.3 }},
        legend: 'none',
    };

في ما يلي رسم بياني خطي بفاصل شريطي يتضمّن فواصل i2 تمثيلية على شكل شرائح:

    var options = {
        title:'Sticks, horizontal',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#E7711B'}],
        intervals: { 'lineWidth': 4, 'barWidth': 0.5 },
        interval: {
            'i2': { 'style':'sticks', 'color':'grey', 'boxWidth': 2.5,
            'lineWidth': 1 }
        },
        legend: 'none',
    };

إليك مخطط خطي فاصل يستخدم مربّعات ذات تعتيم منخفض لوضع الفواصل الزمنية المحددة في الخلفية:

    // Focus is the error bars, but boxes are visible in the background.
    var options_boxes_background = {
        title:'Background boxes',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#1A8763'}],
        intervals: { 'lineWidth':2, 'barWidth': 0.5 },
        interval: {
            'i2': { 'style':'boxes', 'color':'grey', 'boxWidth': 2.5,
            'lineWidth': 0, 'fillOpacity': 0.2 }
        },
        legend: 'none',
    };

يمكننا إنشاء رسم بياني فاصل "النقاط والريشات" من خلال تحديد نمط 'points' ذي تعتيم منخفض لفاصل واحد باستخدام boxWidth:

    var options = {
        title:'Points and whiskers',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#D3362D'}],
        intervals: { 'lineWidth':2, 'barWidth': 0.5 },
        interval: {
            'i2': { 'style':'points', 'color':'grey', 'pointSize': 10,
            'lineWidth': 0, 'fillOpacity': 0.3 }
        },
        legend: 'none',
    };

المخطط الصندوقي

أخيرًا، استنادًا إلى الرسم البياني "النقاط والشوارع" أعلاه، يمكننا استخدام الفواصل الزمنية للمربّعات والشريط لإنشاء رسم بياني صندوقي أساسي.

الخيارات
      var options = {
          title:'Box Plot',
          height: 500,
          legend: {position: 'none'},
          hAxis: {
            gridlines: {color: '#fff'}
          },
          lineWidth: 0,
          series: [{'color': '#D3362D'}],
          intervals: {
            barWidth: 1,
            boxWidth: 1,
            lineWidth: 2,
            style: 'boxes'
          },
          interval: {
            max: {
              style: 'bars',
              fillOpacity: 1,
              color: '#777'
            },
            min: {
              style: 'bars',
              fillOpacity: 1,
              color: '#777'
            }
          }
      };
النص الكامل للنص البرمجي
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawBoxPlot);

    function drawBoxPlot() {

      var array = [
        ['a', 100, 90, 110, 85, 96, 104, 120],
        ['b', 120, 95, 130, 90, 113, 124, 140],
        ['c', 130, 105, 140, 100, 117, 133, 139],
        ['d', 90, 85, 95, 85, 88, 92, 95],
        ['e', 70, 74, 63, 67, 69, 70, 72],
        ['f', 30, 39, 22, 21, 28, 34, 40],
        ['g', 80, 77, 83, 70, 77, 85, 90],
        ['h', 100, 90, 110, 85, 95, 102, 110]
      ];

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'x');
      data.addColumn('number', 'series0');
      data.addColumn('number', 'series1');
      data.addColumn('number', 'series2');
      data.addColumn('number', 'series3');
      data.addColumn('number', 'series4');
      data.addColumn('number', 'series5');
      data.addColumn('number', 'series6');

      data.addColumn({id:'max', type:'number', role:'interval'});
      data.addColumn({id:'min', type:'number', role:'interval'});
      data.addColumn({id:'firstQuartile', type:'number', role:'interval'});
      data.addColumn({id:'median', type:'number', role:'interval'});
      data.addColumn({id:'thirdQuartile', type:'number', role:'interval'});

      data.addRows(getBoxPlotValues(array));

      /**
       * Takes an array of input data and returns an
       * array of the input data with the box plot
       * interval data appended to each row.
       */
      function getBoxPlotValues(array) {

        for (var i = 0; i < array.length; i++) {

          var arr = array[i].slice(1).sort(function (a, b) {
            return a - b;
          });

          var max = arr[arr.length - 1];
          var min = arr[0];
          var median = getMedian(arr);

          // First Quartile is the median from lowest to overall median.
          var firstQuartile = getMedian(arr.slice(0, 4));

          // Third Quartile is the median from the overall median to the highest.
          var thirdQuartile = getMedian(arr.slice(3));

          array[i][8] = max;
          array[i][9] = min
          array[i][10] = firstQuartile;
          array[i][11] = median;
          array[i][12] = thirdQuartile;
        }
        return array;
      }

      /*
       * Takes an array and returns
       * the median value.
       */
      function getMedian(array) {
        var length = array.length;

        /* If the array is an even length the
         * median is the average of the two
         * middle-most values. Otherwise the
         * median is the middle-most value.
         */
        if (length % 2 === 0) {
          var midUpper = length / 2;
          var midLower = midUpper - 1;

          return (array[midUpper] + array[midLower]) / 2;
        } else {
          return array[Math.floor(length / 2)];
        }
      }

      var options = {
          title:'Box Plot',
          height: 500,
          legend: {position: 'none'},
          hAxis: {
            gridlines: {color: '#fff'}
          },
          lineWidth: 0,
          series: [{'color': '#D3362D'}],
          intervals: {
            barWidth: 1,
            boxWidth: 1,
            lineWidth: 2,
            style: 'boxes'
          },
          interval: {
            max: {
              style: 'bars',
              fillOpacity: 1,
              color: '#777'
            },
            min: {
              style: 'bars',
              fillOpacity: 1,
              color: '#777'
            }
          }
      };

      var chart = new google.visualization.LineChart(document.getElementById('box_plot'));

      chart.draw(data, options);
    }