Tổng quan
Google Biểu đồ có thể hiển thị các khoảng thời gian xung quanh một chuỗi. Các giá trị này 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ị, tỷ lệ lấy mẫu phân vị hoặc bất kỳ yếu tố nào khác yêu cầu biên độ thay đổi xung quanh một chuỗi.
Có 6 kiểu khoảng thời gian: đường, thanh, hộp, hình gậy, điểm và vùng. Dưới đây là các ví dụ cho từng mục. Trong mỗi ví dụ, chúng tôi sẽ sử dụng cùng một tập dữ liệu, như minh hoạ dưới đây mà không có bất kỳ khoảng thời gian nào:
Biểu đồ trên rất đơn giản: nó có 7 chuỗi dữ liệu, tất cả đều có tầm quan trọng như nhau. Ở phần tiếp theo, chúng tôi sẽ giả định rằng loạt nội dung đầu tiên là loạt nội dung chính và 6 loạt nội dung còn lại được so sánh với loạt nội dung đó thông qua các khoảng thời gian.
Khoảng thời gian dòng
Khoảng thời gian của dòng đôi khi được dùng để mô tả phương sai của nhiều thử nghiệm. Trong biểu đồ sau đây, chúng tôi minh hoạ một chuỗi chính và các khoảng thời gian xung quanh chuỗi đó.
<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 3 giá trị nhận dạng khác nhau vào chuỗi bổ sung: i0, i2 và i3. Chúng ta có thể sử dụng các kiểu đó để tạo kiểu cho các chuỗi đó theo cách khác nhau; ở bên dưới, chúng tôi cung cấp cho chúng 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 mã nhận dạng như chúng tôi nêu ở trên, trong đó i2 được dùng 4 lần. Tính nă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 thanh
Khoảng thời gian thanh tạo ra các thanh lỗi xung quanh dữ liệu của bạn. Cột đầu tiên và cột cuối cùng của khoảng thời gian được vẽ dưới dạng các 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 "nấc đánh dấu" ngắn hơn. Một "thanh" được thêm để nối các thanh rộng (nếu hai thanh này có cùng giá trị, thì thanh đó sẽ được kết xuất dưới dạng một điểm, trừ phi tuỳ chọn pointSize bằng 0).
Bạn có thể kiểm soát chiều rộng của các thanh ngang tương ứng với cột đầu tiên và cột cuối cùng bằng intervals.barWidth, còn 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 bị bỏ qua, bạn sẽ thấy một biểu đồ như biểu đồ ở trên với các tuỳ chọn bên dưới:
var options_bars = {
title: 'Bars, default',
curveType: 'function',
series: [{'color': '#D9544C'}],
intervals: { style: 'bars' },
legend: 'none',
};
Khoảng thời gian của hộp
Khoảng cách giữa các hộp hiển thị các cột trong bảng dữ liệu 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, còn các cột bên trong hiển thị dưới dạng hình chữ nhật tối hơn bên trong hộp chứa các cột đó.
Dưới đây là cách chỉ định khoảng thời gian theo hộp:
var options = {
series: [{'color': '#1A8763'}],
intervals: { style: 'boxes' },
legend: 'none',
};
Bạn có thể làm cho các hộp nổi bật hơn bằng tuỳ chọn intervals.lineWidth và intervals.barWidth:
Các lựa chọn có 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 thanh toán
Khoảng giá trị cố định hiển thị các cặp cột dưới dạng một tập hợp các thanh song song với trục mục tiêu. Một thanh có chiều cao bằng 0 được kết xuất dưới dạng một điểm. Bạn có thể chặn điểm này bằng cách đặt tuỳ chọn pointSize thành 0.
Bạn có thể tạo những đối tượng này bằng style của '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 điểm cho thấy dữ liệu về 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:
var options_points = {
title:'Points, default',
curveType:'function',
lineWidth: 4,
series: [{'color': '#D3362D'}],
intervals: { 'style':'points', pointSize: 2 },
legend: 'none',
};
Điểm 8 như sau:
Khoảng thời gian khu vực
Khoảng thời gian theo 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. Cách lồng các cặp cột cũng tương tự như cách lồng các ô, ngoại trừ việc cần có số lượng cột bằng nhau.
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 kiểu khoảng thời gian
Để tuỳ chỉnh hiệu quả hơn nữa, bạn có thể kết hợp các kiểu ngắt quãng bên trong một biểu đồ.
Sau đây là biểu đồ kết hợp các khoảng giữa vùng và thanh:
Trong biểu đồ trên, chúng tôi chỉ định style là 'bars' cho các khoảng thời gian được gắn thẻ i0 và i1, và một kiểu 'area' cho i2. Sau đó, chúng ta 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 khoảng thanh, trong đó các khoảng 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 khoảng thời gian sử dụng các hộp có độ mờ thấp để đặt các khoảng thời gian đã chọn trong 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 cho 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',
};
Cốt truyện
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 các khoảng cách hộp và thanh để tạo biểu đồ dạng hộp cơ bả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'
}
}
};
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);
}