Khoảng thời gian

  1. Tổng quan
  2. Khoảng thời gian của dòng
  3. Khoảng thời gian thanh
  4. Khoảng thời gian hộp
  5. Dấu cách
  6. Khoảng thời gian điểm
  7. Khoảng thời gian khu vực
  8. Kết hợp các kiểu khoảng thời gian

Tổng quan

Biểu đồ của Google có thể hiển thị khoảng thời gian xung quanh một chuỗi. Chúng có thể được dùng để mô tả khoảng tin cậy, giá trị tối thiểu và tối đa xung quanh một giá trị, lấy mẫu phân vị hoặc bất kỳ giá trị nào khác yêu cầu lề khác nhau xung quanh một chuỗi.

Có 6 kiểu khoảng thời gian là dòng, thanh, hộp, thanh, điểm và vùng. Dưới đây là ví dụ về từng phương pháp. Trong mỗi ví dụ, chúng tôi sẽ sử dụng cùng một tập dữ liệu (hiển thị mà không có khoảng thời gian) ở đây:

Biểu đồ trên rất đơn giản: biểu đồ có 7 chuỗi dữ liệu, tất cả đều có tầm quan trọng như nhau. Trong nội dung tiếp theo, chúng tôi sẽ giả định rằng loạt đầu tiên là bộ chính và 6 loạt còn lại đang được so sánh với nó qua các khoảng thời gian.

Khoảng dòng

Khoảng dòng đôi khi được dùng để mô tả phương sai của nhiều thử nghiệm. Trong biểu đồ sau, chúng tôi minh hoạ một chuỗi chính và các khoảng thời gian liên quan đến chuỗi video đó.

 
<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>

Trong dữ liệu ở trên, bạn có thể thấy rằng chúng tôi đã đính kèm ba giá trị nhận dạng khác nhau vào chuỗi nội dung bổ sung: i0, i2 và i3. Chúng ta có thể sử dụng những màu đó để tạo kiểu cho các chuỗi đó; chúng tôi cung cấp cho họ các màu sắc và độ dày khác nhau.

Lưu ý: Nhìn chung, bạn không nên sử dụng lại các mã nhận dạng như chúng tôi đã đề cập ở trên, trong đó i2 được sử dụng 4 lần. Ứng dụng này hoạt động, nhưng chúng tôi có thể thay đổi hành vi này trong tương lai.

Điểm khác biệt duy nhất nằm ở các tuỳ chọn:

    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',
    };

Khoảng thời gian trên thanh

Khoảng thời gian thanh tạo thanh lỗi xung quanh dữ liệu của bạn. Các cột đầu tiên và cuối cùng của khoảng thời gian được vẽ dưới dạng thanh rộng song song với trục miền, còn các cột bên trong được vẽ dưới dạng "dấu kiểm" ngắn hơn. Thêm một " gậy" để nối các thanh rộng (nếu 2 thanh này có cùng giá trị thì thanh sẽ được kết xuất dưới dạng điểm, trừ khi tuỳ chọn pointSize bằng 0).

Chiều rộng của các thanh ngang tương ứng với cột đầu tiên và cuối cùng được kiểm soát bằng intervals.barWidth, và chiều rộng của các thanh ngang tương ứng với các cột bên trong được kiểm soát bằng intervals.shortBarWidth. Khi các trường đó bị bỏ qua, bạn sẽ nhận được biểu đồ như ở trên, trong đó có các tuỳ chọn dưới đây:

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

Khoảng thời gian hộp

Khoảng thời gian hộp hiển thị các cột trong bảng dữ liệu của bạn dưới dạng một tập hợp các hình chữ nhật lồng nhau: cột đầu tiên và cột cuối cùng tạo thành hình chữ nhật ngoài cùng, và các cột bên trong hiển thị dưới dạng hình chữ nhật tối hơn trong hộp chứa.

Sau đây là cách chỉ định khoảng thời gian hộp:

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

Bạn có thể làm cho các ô này nổi bật hơn bằng các tuỳ chọn intervals.lineWidth và intervals.barWidth:

Các tùy chọn liên quan:

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

Khoảng thời gian đánh dấu

Dấu chấm hiển thị các cặp cột dưới dạng một tập hợp các gậy song song với trục mục tiêu. Một thanh có chiều cao bằng 0 sẽ được hiển thị dưới dạng điểm, có thể chặn được bằng cách đặt tùy chọn pointSize thành 0.

Bạn có thể tạo các lớp này với style là 'sticks':

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

Khoảng thời gian điểm

Khoảng thời gian điểm hiển thị dữ liệu khoảng thời gian dưới dạng các vòng tròn nhỏ:

Bạn có thể kiểm soát kích thước điểm bằng tuỳ chọn intervals.pointSize. Sau đây là 2 câu hỏi:

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

Sau đây là ví dụ về mã 8:

Khoảng thời gian của khu vực

Khoảng thời gian vùng hiển thị dữ liệu khoảng thời gian dưới dạng một tập hợp các vùng được tô bóng lồng nhau. Việc lồng ghép các cặp cột tương tự như cách lồng ghép các khoảng thời gian hộp, ngoại trừ việc số lượng cột chẵn là bắt buộc.

Bạn có thể thực hiện việc này bằng cách đặt style thành 'area': 

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

Kết hợp các kiểu khoảng thời gian

Để tuỳ chỉnh nhiều hơn nữa, bạn có thể kết hợp các kiểu khoảng thời gian vào một biểu đồ.

Dưới đây là biểu đồ kết hợp các khoảng thời gian giữa các khu vực và thanh:

Trong biểu đồ trên, chúng ta chỉ định style của 'bars' cho các khoảng thời gian được gắn thẻ i0 và i1, và kiểu 'area' cho i2. Sau đó, chúng tôi sử dụng pointSize để giới hạn các thanh:

    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',
    };

Dưới đây là biểu đồ dạng đường trong thanh có các khoảng thời gian i2 được biểu thị dưới dạng thanh:

    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',
    };

Dưới đây là biểu đồ dạng đường ngắt quãng sử dụng các hộp có độ mờ thấp để đặt các khoảng thời gian đã chọn ở chế độ nền:

    // 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',
    };

Chúng ta có thể tạo biểu đồ khoảng thời gian "điểm và râu" bằng cách chỉ định kiểu 'points' có độ mờ thấp trong một khoảng thời gian cùng với 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',
    };

Mô hình hộp

Cuối cùng, dựa trên biểu đồ "điểm và râu" ở trên, chúng ta có thể sử dụng khoảng thời gian hộp và thanh để tạo biểu đồ cơ bản về ô.

Tùy chọn
      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'
            }
          }
      };
Nội dung tập lệnh đầy đủ
    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);
    }