| Dot Plot
1. Im
Header das Plotly-Script (plotly-latest.min.js)
und die Array-Definitionen (lukeme_array.js)
einbinden:
<script src="header/plotly-latest.min.js"></script>
<script src="header/lukeme_array.js"></script>
2. Im Body
einen Bereich festlegen, in dem die Daten visualisiert werden:
<div id="AnzeigeDiv"
style="width:800,height:600"></div>
3. Script-Teil
starten, in dem die Traces mit den Datenwerten zusammengestellt werden
<script>
var trace1 = {
type: 'scatter',
x: attackTime_array,
y: pitch_array,
mode: 'markers',
name: 'Einschwingzeit',
marker: {
color: 'rgba(188, 48, 47, 0.8)',
line: {
color: 'rgba(188, 48, 47, 1.0)',
width: 1,
},
symbol:
'circle',
size: 8,
}
};
var trace2 = {
type: 'scatter',
x: releaseTime_array,
y: pitch_array,
mode: 'markers',
name: 'Ausklingzeit',
marker: {
color: 'rgba(217, 217, 217, 0.8)',
line: {
color: 'rgba(217, 217, 217, 1.0)',
width: 1,
},
symbol:
'circle',
size: 8,
}
};
4. Alle Traces
im Array data zusammenführen:
var data = [ trace1,
trace2];
5. Layout
bestimmen:
var layout = {
height:600,
showlegend: true,
xaxis: {
showgrid: false,
showline: true,
title: 'Dauern [sec]',
},
yaxis: {
title: 'Tonhöhe',
},
legend: {
font: { family: 'Verdana, sans-serif', size: 10, color: 'black', },
yanchor: 'middle',
xanchor: 'right'
},
hovermode: 'closest',
title: 'Ein- und Ausschwingzeiten der Lukeme',
};
6. Daten
und Layout zusammenführen, im oben definierten Bereich ausplotten
und Script-Teil beenden:
Plotly.newPlot('AnzeigeDiv',
data, layout);
</script>
|