Übersicht
In Google-Diagrammen können Intervalle um eine Reihe dargestellt werden. Sie können verwendet werden, um Konfidenzintervalle, Mindest- und Höchstwerte für einen Wert, Perzentil-Stichproben oder alles andere darzustellen, bei dem ein variierender Rand um eine Reihe erforderlich ist.
Es gibt sechs Intervallstile: Linie, Balken, Rechteck, Strich, Punkt und Fläche. Im Folgenden sehen Sie jeweils Beispiele. Für jedes Beispiel verwenden wir dasselbe Dataset, das hier ohne Intervalle gezeigt wird:
Das obige Diagramm ist einfach: 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. Die anderen sechs werden mithilfe von Intervallen damit verglichen.
Zeilenintervalle
Linienintervalle werden manchmal verwendet, um die Varianz mehrerer Tests darzustellen. Im folgenden Diagramm veranschaulichen wir eine primäre Reihe und Intervalle um sie herum.
<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 zugeordnet haben: i0, i2 und i3. Wir können diese verwenden, um diese Reihen unterschiedlich zu gestalten. Im Folgenden geben wir ihnen unterschiedliche Farben und Stärken.
Hinweis:Im Allgemeinen ist es nicht sinnvoll, IDs wie oben beschrieben wiederzuverwenden, wobei i2 viermal verwendet wird. Das funktioniert, kann sich jedoch 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
Balkenintervalle erstellen Fehlerbalken um Ihre Daten. Die erste und letzte Spalte des Intervalls werden als breite Balken parallel zur Domainachse gezeichnet, die inneren Spalten als kürzere „Ticks“. Ein "Stick" wird hinzugefügt, um die breiten Balken zu verbinden. Wenn diese beiden Balken denselben Wert haben, wird der Strich als Punkt gerendert, sofern die Option pointSize nicht null ist.
Die Breite der horizontalen Balken, die der ersten und letzten Spalte entsprechen, wird mit intervals.barWidth und die Breite der horizontalen Balken, die den inneren Spalten entsprechen, mit intervals.shortBarWidth festgelegt. Wenn diese ausgelassen werden, erhalten Sie ein Diagramm wie das obige mit den folgenden Optionen:
var options_bars = {
title: 'Bars, default',
curveType: 'function',
series: [{'color': '#D9544C'}],
intervals: { style: 'bars' },
legend: 'none',
};
Boxintervalle
Mit Box-Intervallen wurden Spalten in Ihrer Datentabelle als ein Satz verschachtelter Rechtecke gerendert. Die erste und letzte Spalte bilden das äußerste Rechteck und die inneren Spalten werden als dunklere Rechtecke in ihrem enthaltenden Rechteck gerendert.
So legen Sie Boxintervalle fest:
var options = {
series: [{'color': '#1A8763'}],
intervals: { style: 'boxes' },
legend: 'none',
};
Mit den Optionen intervals.lineWidth und intervals.barWidth können Sie die Felder besser 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',
};
Stickintervalle
Bei Stickintervallen werden Spaltenpaare als eine Reihe von Sticks angezeigt, die parallel zur Zielachse liegen. Ein Stick mit der Höhe null wird als Punkt gerendert, der unterdrückt werden kann, indem 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 lässt sich mit der Option intervals.pointSize steuern. Hier ist es 2:
var options_points = {
title:'Points, default',
curveType:'function',
lineWidth: 4,
series: [{'color': '#D3362D'}],
intervals: { 'style':'points', pointSize: 2 },
legend: 'none',
};
Bei 8 sieht es so aus:
Flächenintervalle
Mit einem Flächenintervall werden Intervalldaten als ein Satz verschachtelter schattierter Bereiche gerendert. Die Verschachtelung von Spaltenpaaren ähnelt der Verschachtelung von Feldintervallen, 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
Zur weiteren Anpassung können Sie Intervallstile in einem Diagramm kombinieren.
Dieses Diagramm kombiniert Flächen- und Balkenintervalle:
Im obigen Diagramm geben wir einen style von 'bars' für Intervalle an, die mit i0 und i1 getaggt sind, sowie einen 'area'-Stil für i2. 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 Balkenintervall-Liniendiagramm mit den i2-Intervallen, die 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 sehen Sie ein Intervall-Liniendiagramm, in dem ausgewählte Intervalle mithilfe von Feldern mit niedriger 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',
};
Sie können ein Intervalldiagramm vom Typ „Punkte und Whiskers“ erstellen, indem Sie einen 'points'-Stil mit niedriger Deckkraft für ein Intervall zusammen mit einem 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
Schließlich können wir basierend auf dem obigen Diagramm für Punkte und Whisker mithilfe von Kasten- und Balkenintervallen ein einfaches Box-Plot-Diagramm 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);
}