Kein Problem:
HTML
<!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="display" class="circlecountdown"
width="220" height="220"></canvas>
<input id="val" />
<script>
$("#val").on("change", function () {
updateBarDisplay("#display", this.value);
});
function getColor(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 updateBarDisplay(selector, value) {
$(selector).each(function (idx, ele) {
var canv = $(this);
var max = canv.data("max");
var opts = canv.data("opts");
var barWidth = value / max * opts.barWidth;
canv.setLayer('text', {
text: getText(value, max, opts)
}).stopLayer('bar')
.animateLayer('bar', {
width: barWidth,
fillStyle: getColor(value, opts)
}, {
duration: 1000,
easing: 'linear',
step: function (now, fx, layer) {
console.log(now, fx);
}
});
});
}
function createBarDisplay(selector, value, max, options) {
var opts = {
barWidth: 300,
barHeight: 40,
cornerRadius: 10,
colorBar: "blue",
colorBg: "lightgrey",
colorText: "orange",
templateText: "{value} $",
textPos: "left",
colors: [
{ threshold: 30, colorAbove: 'yellow' },
{ threshold: 60, colorAbove: 'green' }
]
}
$.extend(opts, options);
$(selector).each(function (idx, ele) {
var pos = 10;
var canv = $(this);
canv.data("opts", opts);
canv.data("max", max)
var colorBar = getColor(value, opts);
var height = 2 * pos + opts.barHeight;
canv.drawText({
layer: true,
name: 'text',
fromCenter: false,
fillStyle: opts.colorText,
strokeWidth: 4,
x: pos, y: pos,
fontSize: 40,
fontFamily: 'Arial',
text: opts.templateText.replace("{value}", max).replace("{remaining}", max)
});
yBar = pos + canv.measureText('text').height / 2 - opts.barHeight / 2;
if (opts.textPos == "left") {
var xBar = pos + canv.measureText('text').width + 10,
xText = pos;
} else {
var xBar = pos,
xText = pos + opts.barWidth + 10;
}
var width = pos + canv.measureText('text').width + 10 + opts.barWidth + pos;
canv.attr("width", width);
canv.attr("height", height);
canv.setLayer('text', {
text: getText(value, max, opts),
x: xText
}).drawLayers();
canv.drawRect({
layer: true,
name: 'background',
fromCenter: false,
fillStyle: opts.colorBg,
x: xBar, y: yBar,
cornerRadius: opts.cornerRadius,
width: opts.barWidth, height: opts.barHeight
});
canv.drawRect({
layer: true,
name: 'bar',
fromCenter: false,
fillStyle: colorBar,
x: xBar, y: yBar,
cornerRadius: opts.cornerRadius,
width: value / max * opts.barWidth, height: opts.barHeight
});
});
}
createBarDisplay('#display', 10, 100, {
colorBar: 'red',
colors: [
{ threshold: 30, colorAbove: 'yellow' },
{ threshold: 60, colorAbove: 'green' },
],
templateText: "{remaining} $",
textPos: "right"
});
</script>
</body>
</html>
Alles anzeigen