Java Script variable zu weisen

peer Gast #5155168
Lesenswert?
• ▲
▼ 
hallo,
Ich spiele ein bischen in den Beispielen , so nun meine Frage wie kann 
ich eine Variable zu weisen.

Wenn ich jetzt  im //JS SCRIPT
colors:{plate:"#222" so schreibe dann wird mir auch die richtige Farbe 
angezeuigt.

aber so eben nicht //JS SCRIPT
colors:{plate:data-color-plate
Was mache ich hier falsch


1
  <canvas id="t1" data-color-plate="#00FFFF"

2
                  data-title="WOHN" 

3
          data-units="Temp. &deg;C" width="350" height="350" 

4
          data-major-ticks="0 10 20 30 40 50" 

5
          data-type="canv-gauge" 

6
          data-min-value="0" 

7
          data-max-value="50" 

8
          data-highlights="0 5 #AFEEEE, 5 22 #00FF00, 22 30 #FFA500, 30 40 #FF0000, 40 50 #B22222" 

9
          data-color-plate="#222"

10
          data-onready="setInterval( function() { Gauge.Collection.get('t1').setValue(data_t[0]);}, 200);">

11
                  </canvas>

12


13
//JS SCRIPT

14
colors:{plate:data-color-plate,

15
majorTicks:"#444",

16
minorTicks:"#666",

17
title:"#888",

18
units:"#888",

19
numbers:"#444",n

20
eedle:{start:"rgba(240, 128, 128, 1)",

21
end:"rgba(255, 160, 122, .9)"}},

22
highlights:[{from:20,to:60,color:"#eee"},

23
{from:60,to:80,color:"#ccc"},

24
{from:80,to:100,color:"#999"}]};

25
var y=0,E=this,n=0,I=0,H=!1;this.setValue=
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
peer Gast #5155201
Lesenswert?
• ▲
▼ 
Abradolf L. schrieb:
> Du musst das data-Attribut auswerten.


könnten sie mir kurz unter die Arme greifen wie das richtig gemacht 
wird.

1
    domReady(function()

2
     {

3
      function b(b)

4
       {

5
        for(var e=b[0],d=1,g=b.length;d<g;d++)e+=b[d].substr(0,1).toUpperCase()+b[d].substr(1,b[d].length-1);

6
      return e

7
       }

8
       for(var l=document.getElementsByTagName("canvas"),q=0,v=l.length;q<v;q++)

9
        if("canv-gauge"==l[q].getAttribute("data-type"))

10
       {

11
        var k=l[q],e={},g,p=parseInt(k.getAttribute("width"),10),w=parseInt(k.getAttribute("height"),10);

12
        e.renderTo=k;

13
        p&&(e.width=p);

14
        w&&(e.height=w);

15
        p=0;

16
        for(w=k.attributes.length;p<w;p++)

17
        if(g=k.attributes.item(p).nodeName,"data-type"!=g&&"data-"==g.substr(0,5))

18
         {

19
          var d=g.substr(5,g.length-5).toLowerCase().split("-");

20
         if(g=k.getAttribute(g))switch(d[0])

21
          {

22
           case "colors":d[1]&&(e.colors||(e.colors={}),"needle"==d[1]?(d=g.split(/\s+/),e.colors.needle=d[0]&&d[1]?{start:d[0],end:d[1]}:g):(d.shift(),e.colors[b(d)]=g));

23
           break;

24
           case "highlights":e.highlights||(e.highlights=[]);

25
           g=g.match(/(?:(?:-?\d*\.)?(-?\d+){1,2} ){2}(?:(?:#|0x)?(?:[0-9A-F|a-f]){3,8}|rgba?\(.*?\))/g);

26
           for(var d=0,J=g.length;d<J;d++)

27
            {

28
           var s=g[d].replace(/^\s+|\s+$/g,"").split(/\s+/),x={};

29
                     s[0]&&""!=s[0]&&(x.from=s[0]);

30
           s[1]&&""!=s[1]&&(x.to=s[1]);

31
           s[2]&&""!=s[2]&&(x.color=s[2]);

32
           e.highlights.push(x)

33
          }

34
          break;

35
          case "animation":d[1]&&(e.animation||(e.animation={}),"fn"==d[1]&&/^\s*function\s*\(/.test(g)&&(g=eval("("+g+")")),e.animation[d[1]]=g);

36
          break;

37
          default:d=b(d);

38
          if("onready"==d)

39
          continue;

40
          if("majorTicks"==d)g=g.split(/\s+/);

41
          else if("strokeTicks"==d||"glow"==d)g="true"==g?!0:!1;

42
          else if("valueFormat"==d)

43
          if(g=g.split("."),2==g.length)g={"int":parseInt(g[0],10),dec:parseInt(g[1],10)};

44
          else continue;

45
                    e[d]=g}}e=new Gauge(e);

46
          k.getAttribute("data-value")&&e.setRawValue(parseFloat(k.getAttribute("data-value")));

47
          k.getAttribute("data-onready")&&(e.onready=function()

48
           { 

49
            eval(this.config.renderTo.getAttribute("data-onready"))});

50
            e.draw()}});

51
          window.Gauge=Gauge;

52
                <!-- Gauge Code Ends -->
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Thread beobachten

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren