Hallo Farmer,
ich glaube, ich verstehe Dein Problem, oder jedenfalls Dein Vorhaben.
Ich hatte heute hier (viewtopic.php?f=35&t=13917&p=189277#p189277) eine Visualisierung gezeigt, in der ich ebenfalls dynamisch die Farbkodierung anpasse. Bei mir geht's ohne Flimmern, ich passe die Farbe aber auch stufenlos und und ohne Sekundentakt, sondern einfach bei Änderung. Das mache ich so:
function color(value) {
var highColor = "#ff6060";
var lowColor = "#6060ff";
var highTemp = 90;
var lowTemp = 20;
if(value > highTemp) {
return highColor;
}
else if(value < lowTemp) {
return lowColor;
}
else {
var lr = parseInt("0x"+lowColor.substring(1,3));
var lg = parseInt("0x"+lowColor.substring(3,5));
var lb = parseInt("0x"+lowColor.substring(5,7));
var hr = parseInt("0x"+highColor.substring(1,3));
var hg = parseInt("0x"+highColor.substring(3,5));
var hb = parseInt("0x"+highColor.substring(5,7));
var cr = parseInt(lr + (hr-lr)*(value-lowTemp)/(highTemp-lowTemp)).toString(16);
var cg = parseInt(lg + (hg-lg)*(value-lowTemp)/(highTemp-lowTemp)).toString(16);
var cb = parseInt(lb + (hb-lb)*(value-lowTemp)/(highTemp-lowTemp)).toString(16);
cr = cr.length == 1 ? "0"+cr: cr;
cg = cg.length == 1 ? "0"+cg: cg;
cb = cb.length == 1 ? "0"+cb: cb;
return "#"+cr+cg+cb;
}
Diese Funktion rufe ich dann auf und ändere in der Darstellung einfach die Farbe eines Objektes:
document.getElementById("kollektor_fuellung").setAttribute("fill", color((document.getElementById('kollektor_temp').innerHTML)));
Vielleicht ist dieser Ansatz ohnehin der flexiblere? Jedenfalls habe ich keine Flimmerprobleme …
Marc
