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

  1. نظرة عامة
  2. الفترات الزمنية للسطر
  3. الفترات الزمنية للشريط
  4. فترات عرض الفواصل الإعلانية على Box
  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);
    }