بررسی اجمالی
نمودارهای گوگل می توانند فواصل زمانی را در اطراف یک سری نمایش دهند. آنها ممکن است برای به تصویر کشیدن فواصل اطمینان، مقادیر حداقل و حداکثر در اطراف یک مقدار، نمونه برداری از صدک، یا هر چیز دیگری که به حاشیه متغیر در اطراف یک سری نیاز دارد استفاده شوند.
شش سبک فاصله وجود دارد: خط، نوار، جعبه، چوب، نقطه و ناحیه. در زیر نمونه هایی از هر کدام را مشاهده خواهید کرد. در هر مثال، ما از همان مجموعه داده استفاده می کنیم که در اینجا بدون هیچ فاصله ای نشان داده شده است:
نمودار بالا ساده است: دارای هفت سری داده است که همه از نظر اهمیت یکسان هستند. در ادامه، فرض می کنیم که سری اول سری اولیه است و شش سری دیگر از طریق فواصل زمانی با آن مقایسه می شوند.
فواصل خطوط
فواصل خطوط گاهی اوقات برای به تصویر کشیدن واریانس آزمایش های متعدد استفاده می شود. در نمودار زیر یک سری اولیه و فواصل اطراف آن را نشان می دهیم.
<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);
}