Diagram mit einem von-bis Wert und einem Mittelwert programmieren

L

Lord-Roli

Mitglied
Hallo,

mein Problem ist in Moment, dass ich keine Idee habe, wie ich dieses Diagramm programmieren könnte:

https://dl.dropboxusercontent.com/u/6626296/diagram.jpg

Es gibt eine von-bis-Wert zwischen 10-70.

Es gibt Daten mit Werten von-bis und einem Mittelwert.
Diese Werte sollten in grün dargestellt werden.

Gibt es evtl. schon ein fertiges Plugin dafür? Falls nicht, kann man mir evtl. Ansätze nennen, wie ich sowas angehe?

Grüße
Rolf
 
Hi,

das sollte mit CSS zu machen sein. Du kannst ja Elemente mittels der z-index Eigenschaft stapeln. Die farblichen Anpassungen erfolgen über die Hintergrundfarbe der Elemente.

Programmatisch wäre es mit Canvas zu lösen - suche mal nach Canvas und Diagramm, vielleicht findest du ja das passende Plugin.

Ciao
Quaese
 
Du kannst die "Balken" mit Hilfe des span-Tags und CSS gestalten.

HTML: 
<span style="width: 250px; height: 20px; background-color: #C0C0C0;">
	<span style="position: relative; left: 20px; width: 70px; height: 20px; background-color: green;">
		<span style="position: relative; left: 30px; width: 5px; height: 20px; background-color: #00FF00;"></span>
	</span>
</span>

Die "left"- und "width"-Angaben musst du dann halt entsprechen der Angaben setzen.
 
Zuletzt bearbeitet:
Ich hab mir jetzt überlegt das mit dem Jquery UI Slider zu lösen, da man den auf disable setzen kann und somit nur readonly.
Mein code in Moment:
HTML: 
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<style type="text/css">
a.ui-state-default, a.ui-widget-content a.ui-state-default { display:none; }
.ui-widget-content { background:#ccc; }
.ui-slider .ui-slider-range { background:green; }
.slide_outer { width:360px;position:relative; }
.average {
	width:2px;
	height:15px;
	background:red;
	position:absolute;
	top:0px;
	z-index:10;
}
</style>

<script>
	$(function() {
		$( "#slider-range" ).slider({
			disabled:true,
			range: true,
			min: 10,
			max: 70,
			values: [15, 50]
		});
		$("#amount").val($("#slider-range").slider("values", 0) +" - " + $("#slider-range").slider("values", 1));
	});
</script>
</head>
<body>

<p>
  <label for="amount">Range:</label>
  <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>

<div class="slide_outer">
	<div id="slider-range">
		<div class="average" style="left:30px;"></div>
		<div class="average" style="left:240px;"></div>
	</div>
</div>
</body>
</html>

Mein problem ist nun wie, ich den left-Wert bei den "Average herauskriege..mir fehlt da irgendwie die Formel.
Der Slider ist 360px Breit, das wäre die Range von 10-70. Der Value 15 müsste ungefähr bei left:30px sein und der Wert 50 bei left:240px.
Wie kann ich das berechnen anhand von einem Wert?
 
Code: 
// Wert pro Einheit = Breite / (Max - Min)
360 / (70 - 10) = 6

// Verschiebung = Wert pro Einheit * (Value - Min)
6 * (15 - 10) = 30

6 * (50 - 10) = 240

Wobei ich denke das der Slider nicht wirklich dafür taugt.
 
Schau mal ich habe dir hier ein Beispiel eingestellt das deine Anforderungen erfüllen sollte.

Am Anfang sind einfach zufällige Werte enthalten. So bald du in der Tabelle etwas eingibst und auf Berechnen klickst, werden die Balken neu berechnet.

Die eingestellten Werte werden auch angezeigt wenn du mit der Maus über eines der Diagramme fährst.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück