ภาพรวม
Google Charts จะแสดงช่วงของชุดหนังสือได้ โดยอาจใช้เพื่อแสดงช่วงความเชื่อมั่น ค่าต่ําสุดและค่าสูงสุดรอบๆ ค่า การสุ่มตัวอย่างแบบเปอร์เซ็นไทล์ หรืออะไรก็ได้ที่ต้องใช้อัตรากําไรที่ต่างกันรอบชุด
ช่วงมี 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', };
ช่วงระยะเวลา
ช่วง Box ที่แสดงผลในตารางข้อมูลเป็นชุดสี่เหลี่ยมผืนผ้าที่ซ้อนกัน คอลัมน์แรกและคอลัมน์สุดท้ายจะแสดงเป็นสี่เหลี่ยมผืนผ้าด้านนอกสุด ส่วนคอลัมน์ภายในจะแสดงผลเป็นสี่เหลี่ยมผืนผ้าที่มืดยิ่งขึ้นซึ่งอยู่ภายในกล่อง
วิธีระบุช่วงเวลาของช่อง
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', };
ช่วงการคงอยู่
ช่วงคงที่ แสดงคู่คอลัมน์เป็นชุดไม้ขนานกับแกนเป้าหมาย สติ๊กของความสูง 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:00 น.
ช่วงระยะเวลา
ช่วงพื้นที่จะแสดงข้อมูลช่วงเป็นชุดพื้นที่แรเงาที่ซ้อนอยู่ การฝังคอลัมน์คู่กับคอลัมน์ที่ตรงกันกับช่วงของคอลัมน์ เว้นแต่จะระบุจํานวนคอลัมน์เท่าๆ กัน
ซึ่งทําได้ด้วยการตั้งค่า 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); }