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