ภาพรวม
Google แผนภูมิสามารถแสดงช่วงเวลารอบชุด โดยอาจใช้เพื่อแสดงภาพช่วงความเชื่อมั่น ค่าต่ำสุดและสูงสุดเกี่ยวกับค่า การสุ่มตัวอย่างเปอร์เซ็นไทล์ หรือสิ่งอื่นๆ ที่ต้องการอัตรากำไรที่แตกต่างกันในชุดหนึ่งๆ
ช่วงเวลามี 6 สไตล์ ได้แก่ เส้น แท่ง กล่อง แท่ง จุด และพื้นที่ คุณจะเห็นตัวอย่างของแต่ละรายการด้านล่าง ในแต่ละตัวอย่าง เราจะใช้ชุดข้อมูลเดียวกัน โดยไม่มีช่วงเวลาใดๆ
แผนภูมิด้านบนนี้เรียบง่าย โดยมีข้อมูล 7 ชุด ซึ่งมีความสำคัญเท่ากันหมด สิ่งที่ตามมา เราจะสมมติว่าซีรีส์แรกเป็นซีรีส์หลัก และอีก 6 ซีรีส์เป็นซีรีส์หลักที่มีการเปรียบเทียบกันผ่านช่วงเวลา
ระยะเวลาของเส้น
บางครั้งช่วงบรรทัดจะใช้เพื่อแสดงความแปรปรวนของการทดสอบหลายรายการ ในแผนภูมิต่อไปนี้ เราแสดง อนุกรมหลักและช่วงเวลารอบๆ
<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>
ในข้อมูลด้านบน คุณจะเห็นว่าเราแนบตัวระบุที่แตกต่างกัน 3 รายการในชุดเสริม ได้แก่ i0, i2 และ i3 เราสามารถนำมาใช้ในการจัดรูปแบบของซีรีส์เหล่านั้น
ต่างกันไป ด้านล่างคือสีและความหนาของบางสี
หมายเหตุ: โดยทั่วไปแล้ว การใช้รหัสซ้ำ
อาจอยู่ในรูปแบบที่ไม่ถูกต้องตามที่เราทำข้างต้น โดยระบบใช้ i2 ไปแล้ว 4 ครั้ง วิธีนี้ได้ผล แต่เราอาจเปลี่ยนลักษณะการทำงานนี้ในอนาคต
ความแตกต่างเพียงอย่างเดียวคือในตัวเลือกต่อไปนี้
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',
};
ระยะเวลาของแท่ง
ช่วงเวลาเป็นแถบจะสร้างแถบข้อผิดพลาดรอบๆ ข้อมูลของคุณ คอลัมน์แรกและคอลัมน์สุดท้ายของช่วงจะวาดเป็นแท่งกว้างขนานกับแกนโดเมน และคอลัมน์ด้านในจะวาดเป็น "ขีด" สั้นๆ ระบบจะเพิ่ม "สติ๊ก" เพื่อผนวกแท่งแผนภูมิกว้าง (หากแท่งทั้ง 2 แท่งมีค่าเท่ากัน ระบบจะแสดงแท่งแผนภูมิเป็นคะแนน เว้นแต่ว่าตัวเลือก pointSize จะเป็น 0)
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',
};
ระยะเวลาของ Sticky
ช่วงแท่งแสดงคู่คอลัมน์เป็นชุดไม้แท่งขนานกับแกนเป้าหมาย แท่งไม้ที่มีความสูงเป็น 0 จะแสดงผลเป็นจุด ซึ่งระงับได้โดยตั้งค่าตัวเลือก pointSize เป็น 0
คุณสร้างรายการเหล่านี้ได้โดยใช้ 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' ความทึบแสงต่ำสำหรับช่วงเวลา 1 ช่วงพร้อมกับ 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);
}