Ich muss Benutzerzeitpunkte (Ein- und Auszeiten) eines Tages in einem Graphen mit Angular JS darstellen.Gestapelte Highcharts- So zeichnen Sie einen bestimmten Punkt und entfernen die Farbe aus dem Stack-Block
Zum Beispiel habe ich Büro bei 10 und dann weg zum Mittagessen bei 1, dann kam wieder auf 2 und dann um 2:30 weg für ein wenig Arbeit und so weiter .....
So erreicht haben In der Grafik sollte die y-Achse die Zeit von 10 bis 6 anzeigen und die Zeit im Diagramm darstellen, wie 1. auf 10, dann auf 1, dann auf 2 und dann auf 2.30 und so weiter ...
Also meine Fragen sind:
1) Mit welcher Grafik könnte dies in einem einzigen Balken erreicht werden?
2) Ich benutze Stacked Highchart, aber da gestapeltes Diagramm die Punkte hinzufügen, sende ich den Unterschied zwischen den beiden Daten, also zuerst sende ich 10, ein anderes möchte ich auf 1 zeigen, also sende ich 3 und so weiter ..., aber es füllt den ganzen Block mit einer Farbe, wie von 10-1 eine Farbe, 1-2 eine Farbe und so weiter ..., was ich brauche ist, zuerst sollte es auf 10 dann auf 1 zeigen , dann um 2 ... und so weiter sollte es nicht mit irgendeiner Farbe gefüllt werden.
Was ich bisher erreicht ist: https://plnkr.co/edit/CgnFfTbJ3BkyjHzErQGk?p=preview
aber, was ich will zu erreichen ist so etwas wie dieses
Bitte helfen.
Sie auch den Code überprüfen können:
<html>
<head>
<title>Highcharts Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"> </div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'column'
};
var title = {
text: 'Stacked column chart'
};
var xAxis = {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
};
var yAxis ={
min: 10,
max:18,
tickInterval:1,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
};
var legend = {
enabled:false
};
var tooltip = {
enabled:false
};
var plotOptions = {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
};
var credits = {
enabled: false
};
var series= [
{ name: 'John',
data: [1]
},
{ name: 'John',
data: [0.5]
},
{ name: 'John',
data: [1]
},
{
name: 'Jane',
data: [3]
}, {
name: 'Joe',
data: [10]
}];
var json = {};
json.chart = chart;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.legend = legend;
json.tooltip = tooltip;
json.plotOptions = plotOptions;
json.credits = credits;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
</script>
</body>
</html>
