Übersicht
In Google Charts können Intervalle um eine Reihe angezeigt werden. Sie können verwendet werden, um Konfidenzintervalle, Mindest- und Höchstwerte um einen Wert, Perzentilstichproben oder alles andere nachzuweisen, was einen unterschiedlichen Rand um eine Reihe erfordert.
Es gibt sechs Intervallstile: Linie, Balken, Rahmen, Stift, Punkt und Fläche. Unten sehen Sie Beispiele dafür. In jedem Beispiel verwenden wir das hier dargestellte Dataset ohne Intervalle:
Das Diagramm oben ist einfach aufgebaut: Es enthält sieben Datenreihen, die alle gleich wichtig sind. Im Folgenden gehen wir davon aus, dass die erste Reihe die primäre Reihe ist und die anderen sechs mit Intervallen verglichen werden.
Zeilenintervalle
Linienintervalle werden manchmal verwendet, um die Varianz mehrerer Tests darzustellen. Im folgenden Diagramm werden eine primäre Reihe und die zugehörigen Intervalle veranschaulicht.
<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>
In den obigen Daten sehen Sie, dass wir der ergänzenden Reihe drei verschiedene Kennzeichnungen angehängt haben: i0, i2 und i3. Wir können diese verwenden, um diese Reihen unterschiedlich zu gestalten. Unten geben wir ihnen verschiedene Farben und Stärken.
Hinweis: Im Allgemeinen ist es nicht sinnvoll, IDs wie oben zu verwenden, wobei i2 viermal verwendet wird. Das funktioniert, aber wir können dieses Verhalten in Zukunft ändern.
Der einzige Unterschied besteht in den Optionen:
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',
};
Balkenintervalle
Balkendiagramme erzeugen Fehlerbalken um Ihre Daten. Die erste und die letzte Spalte des Intervalls werden als breite Balken parallel zur Domainachse gezeichnet, die inneren Spalten als kürzere Striche. Zum Zusammenführen der breiten Balken wird ein „Sticker“ hinzugefügt. Wenn diese beiden Balken denselben Wert haben, wird der Stick als Punkt gerendert, sofern die Option pointSize nicht null ist.
Die Breite der horizontalen Balken, die der ersten und der letzten Spalte entsprechen, wird mit intervals.barWidth und die Breite der horizontalen Balken, die den inneren Spalten entsprechen, gesteuert. intervals.shortBarWidth. Wenn diese ausgelassen werden, wird ein Diagramm wie das obige mit den folgenden Optionen angezeigt:
var options_bars = {
title: 'Bars, default',
curveType: 'function',
series: [{'color': '#D9544C'}],
intervals: { style: 'bars' },
legend: 'none',
};
Feldintervalle
Boxintervalle, die in der Datentabelle als verschachtelte verschachtelte Rechtecke gerendert werden: Die erste und die letzte Spalte bilden das äußere Rechteck und die inneren Spalten werden innerhalb des Rahmens als dunkle Rechtecke dargestellt.
So legen Sie Intervalle für Felder fest:
var options = {
series: [{'color': '#1A8763'}],
intervals: { style: 'boxes' },
legend: 'none',
};
Mit den Optionen intervals.lineWidth und intervals.barWidth können Sie die Felder hervorheben:
Relevante Optionen:
var options = {
title:'Boxes, thick',
curveType:'function',
lineWidth: 4,
series: [{'color': '#1A8763'}],
intervals: { 'lineWidth':2, 'barWidth': 0.5, style: 'boxes' },
legend: 'none',
};
Stick-Intervalle
Mit Stickintervallen werden Spaltenpaare als Gruppe von Sticks angezeigt, die parallel zur Zielachse liegen. Ein Stick von null Höhe wird als Punkt gerendert, der unterdrückt werden kann, wenn die Option pointSize auf null gesetzt wird.
Sie können diese mit einem style von 'sticks' erstellen:
var options_sticks = {
title:'Sticks, default',
curveType:'function',
series: [{'color': '#E7711B'}],
intervals: { style: 'sticks' },
legend: 'none',
};
Punktintervalle
Punktintervalle zeigen Intervalldaten als kleine Kreise an:
Die Punktgröße kann mit der Option intervals.pointSize gesteuert werden. Hier ist sie 2:
var options_points = {
title:'Points, default',
curveType:'function',
lineWidth: 4,
series: [{'color': '#D3362D'}],
intervals: { 'style':'points', pointSize: 2 },
legend: 'none',
};
So sieht der Wert um 8 Uhr aus:
Bereichsintervalle
Ein Bereichsintervall rendert Intervalldaten als einen Satz verschachtelter schattierter Bereiche. Das Verschachteln von Spaltenpaaren ähnelt dem der Feldintervalle, mit der Ausnahme, dass eine gerade Anzahl von Spalten erforderlich ist.
Setzen Sie dazu style auf 'area':
var options = {
title:'Area, default',
curveType:'function',
series: [{'color': '#F1CA3A'}],
intervals: { 'style':'area' },
legend: 'none',
};
Intervallstile kombinieren
Für eine noch stärkere Anpassung können Sie Intervallstile in einem Diagramm kombinieren.
In diesem Diagramm sind Intervalle von Balken und Balken dargestellt:
Im obigen Diagramm geben wir für Intervalle mit dem Tag i0 und i1 einen style von 'bars' und für i2 einen 'area'-Stil an. Dann verwenden wir pointSize, um die Balken zu begrenzen:
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',
};
Hier ist ein Balkendiagramm mit Liniendiagrammen, wobei die i2-Intervalle als Sticks dargestellt sind:
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',
};
Hier ist ein Intervallliniendiagramm, in dem ausgewählte Intervalle mit Feldern mit geringer Deckkraft im Hintergrund platziert werden:
// 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',
};
Wir können ein Intervalldiagramm für „Punkte und Schnurrhaare“ erstellen, indem wir einen Stil mit niedriger Deckkraft 'points' für ein Intervall und einen Wert für boxWidth angeben:
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',
};
Kastendiagramm
Abschließend können wir anhand der obigen Punkte und Punkte die Felder und Balkenintervalle verwenden, um ein einfaches Felddiagramm zu erstellen.
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);
}