<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>
</head>
<body>
<canvas id="display1" width="220" height="220"></canvas>
<canvas id="display2" width="220" height="220"></canvas>
<input id="val" />
<button id="colorbtn">Change color</button>
<script>
function getColor2(value, opts) {
var color = opts.colorBar;
if (opts.colors) {
opts.colors.forEach(function (item, idx) {
if (value > item.threshold) color = item.colorAbove;
});
}
return color;
}
function getText(value, max, opts) {
return opts.templateText.replace("{value}", value)
.replace("{remaining}", max - value)
}
function alignText(cv) {
var maxTextWidth = cv.data("max-text-width");
var textWidth = cv.measureText('text').width;
var delta = maxTextWidth - textWidth;
var xText = cv.data("x-text");
cv.setLayer('text', {
x: xText + delta
});
}
function erstelleBalken(selector, value, max, options) {
var balkenEigenschaften = { barWidth: 400, barHeight: 40, barPos: 10,
cornerRadius: 5, colorBg: "lightgrey", colorText: "black", textPos: "right",
templateText: "{value} min" }
$.extend(balkenEigenschaften, options);
$(selector).each(function (index, element) {
var cv = $(this);
cv.data("balkenEigenschaften", balkenEigenschaften);
cv.data("max", max);
if (value > max) max = value;
var colorBar = getColor2(value, balkenEigenschaften);
var height = 2 * balkenEigenschaften.barPos + balkenEigenschaften.barHeight;
cv.drawText({
layer: true,
name: 'text',
fromCenter: false,
fillStyle: balkenEigenschaften.colorText,
strokeWidth: 4,
x: balkenEigenschaften.barPos, y: balkenEigenschaften.barPos,
fontSize: 40,
fontFamily: 'Arial',
text: balkenEigenschaften.templateText.replace("{value}", max).replace("{remaining}", max)
});
cv.data("max-text-width", cv.measureText('text').width);
yBar = balkenEigenschaften.barPos + cv.measureText('text').height / 2 - balkenEigenschaften.barHeight / 2;
if (balkenEigenschaften.textPos == "left") {
var xBar = balkenEigenschaften.barPos + cv.measureText('text').width + 5,
xText = balkenEigenschaften.barPos;
} else {
var xBar = balkenEigenschaften.barPos,
xText = balkenEigenschaften.barPos + balkenEigenschaften.barWidth + 10;
}
cv.data("x-text", xText);
var width = balkenEigenschaften.barPos + cv.measureText('text').width + 10 + balkenEigenschaften.barWidth + balkenEigenschaften.barPos;
cv.attr("width", width);
cv.attr("height", height);
cv.setLayer('text', {
text: getText(value, max, balkenEigenschaften),
x: xText,
});
cv.drawLayers();
cv.drawRect({
layer: true,
name: 'background',
fromCenter: false,
fillStyle: balkenEigenschaften.colorBg,
x: xBar, y: yBar,
cornerRadius: balkenEigenschaften.cornerRadius,
width: balkenEigenschaften.barWidth, height: balkenEigenschaften.barHeight
});
cv.drawRect({
layer: true,
name: 'bar',
fromCenter: false,
fillStyle: colorBar,
x: xBar, y: yBar,
cornerRadius: balkenEigenschaften.cornerRadius,
width: value / max * balkenEigenschaften.barWidth, height: balkenEigenschaften.barHeight
});
});
}
function sychronisiereBalken(selector) {
var maxTextWidth = 0;
$(selector).each(function (index, element) {
var cv = $(element);
var currentWidth = cv.data("max-text-width");
if (currentWidth > maxTextWidth) maxTextWidth = currentWidth;
});
$(selector).each(function (index, element) {
var cv = $(element);
var balkenEigenschaften = cv.data("balkenEigenschaften");
if (balkenEigenschaften.textPos == "left")
xText = balkenEigenschaften.barPos;
else
xText = balkenEigenschaften.barPos + maxTextWidth + balkenEigenschaften.barWidth + balkenEigenschaften.barPos;
cv.setLayer('background', {
x: maxTextWidth + balkenEigenschaften.barPos
}).setLayer('bar', {
x: maxTextWidth + balkenEigenschaften.barPos
}).setLayer('text', {
x: xText
}).drawLayers();
alignText(cv);
cv.attr("width", balkenEigenschaften.barPos + 2 * maxTextWidth + balkenEigenschaften.barWidth + balkenEigenschaften.barPos)
.drawLayers();
});
}
erstelleBalken("#display1", 50, 100, {textPos: "left"});
erstelleBalken("#display2", 5, 100, {textPos: "left"});
sychronisiereBalken("#display1, #display2");
</script>
</body>
</html>
Alles anzeigen
Möglicher Weise musst Du das in der Funktion, die den Balken aktualisiert, auch noch einfügen.
