Обзор
Диаграммы Google могут отображать интервалы вокруг ряда. Их можно использовать для отображения доверительных интервалов, минимальных и максимальных значений вокруг значения, процентильной выборки или чего-либо еще, что требует изменения запаса для ряда.
Существует шесть стилей интервалов: линия, полоса, прямоугольник, палочка, точка и площадь. Ниже вы увидите примеры каждого из них. В каждом примере мы будем использовать один и тот же набор данных, показанный здесь без интервалов:
Приведенная выше диаграмма проста: она содержит семь рядов данных, одинаково важных. В дальнейшем будем считать, что первый ряд является основным, а остальные шесть сравниваются с ним через интервалы.
Интервалы строк
Интервалы строк иногда используются для изображения дисперсии нескольких экспериментов. На следующей диаграмме мы иллюстрируем основной ряд и интервалы вокруг него.
<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);
}