ZingChart cambia trama CSS in base a X-Scale

Sto usando uno ZingChart con AngularJS.ZingChart cambia trama CSS in base a X-Scale

Ho una tabella semplice, ma vorrei che la mia trama fosse rossa se è nel passato (se la data della scala x < Data corrente).

ho scoperto che posso impostare alcune determinate regole per

"plot":{ 
"rules":[ 
    { 
     "rule":"%v 20 && %v < 30", 
     "line-color":"#f93", 
     "line-width":"8", 
     "line-style":"dashed" 
    }, 
]

che sta andando cambiamento css se i valori sono compresi tra 20-30 trama. La mia domanda è -> Come posso cambiare il colore di sfondo della trama in DEPENDING sul valore della scala X? Non sono in grado di riferire correttamente x-scale sulla proprietà di trama ..

fonte

2016-05-23 Shivan

Si cercherebbe il token di testo scala-chiave% invece di semplicemente% v. % scale-key-text avrà come target l'asse scala-x. http://www.zingchart.com/docs/basic-elements/zingchart-tokens/

var myConfig = { 
 
    \t "type": "line", 
 
    \t "title":{ 
 
    \t "text":"%scale-key-value" 
 
    \t }, 
 
    \t "subtitle":{ 
 
    \t "text":"the parsed value" 
 
    \t }, 
 
    \t "crosshair-x":{ 
 
    \t "plot-label":{ 
 
    \t  "text":"%scale-key-value: $%v", 
 
    \t  "decimals":2, 
 
    \t  "transform":{ 
 
    \t  "type":"date", 
 
    \t  "all":"%g:%i %A" 
 
    \t  } 
 
    \t }, 
 
    \t "scale-label":{ 
 
    \t  "visible":false 
 
    \t } 
 
    \t }, 
 
    \t "plot":{ 
 
    \t "tooltip":{ 
 
    \t  "visible":false 
 
    \t }, 
 
    \t "rules": [ 
 
    \t  { 
 
    \t  rule: "%scale-key-text > 1457116200000", 
 
    \t  lineColor: "red" 
 
    \t  } 
 
    \t  ] 
 
    \t }, 
 
    \t "utc":true, 
 
    \t "timezone":-5, 
 
    \t "scale-x":{ 
 
    \t "min-value":"1457101800000", 
 
    \t "max-value":"1457125200000", 
 
    \t "step":"30minute", 
 
    \t "transform":{ 
 
    \t  "type":"date", 
 
    \t  "all":"%g:%i" 
 
    \t }, 
 
    \t "label":{ 
 
    \t  "text":"Trading Day" 
 
    \t }, 
 
    \t "item":{ 
 
    \t  "font-size":10 
 
    \t }, 
 
    \t "max-items":14, 
 
    \t }, 
 
    \t "scale-y":{ 
 
    \t "values":"30:34:1", 
 
    \t "format":"$%v", 
 
    \t "label":{ 
 
    \t  "text":"Price" 
 
    \t }, 
 
    \t "item":{ 
 
    \t  "font-size":10 
 
    \t } 
 
    \t }, 
 
\t "series": [ 
 
\t \t { 
 
\t \t "values":[ 
 
\t \t  [1457101800000,30.34], //03/04/2016 at 9:30 a.m. EST (which is 14:30 in GMT) 
 
\t \t  [1457103600000,31.30], //10:00 a.m. 
 
\t \t  [1457105400000,30.95], //10:30 a.m. 
 
\t \t  [1457107200000,30.99], //11:00 a.m. 
 
\t \t  [1457109000000,32.33], //11:30 a.m. 
 
\t \t  [1457110800000,33.34], //12:00 p.m. 
 
\t \t  [1457112600000,33.01], //12:30 p.m. 
 
\t \t  [1457114400000,34], //1:00 p.m. 
 
\t \t  [1457116200000,33.64], //1:30 p.m. 
 
\t \t  [1457118000000,32.59], //2:00 p.m. 
 
\t \t  [1457119800000,32.60], //2:30 p.m. 
 
\t \t  [1457121600000,31.99], //3:00 p.m. 
 
\t \t  [1457123400000,31.14], //3:30 p.m. 
 
\t \t  [1457125200000,32.34], //at 4:00 p.m. EST (which is 21:00 GMT) 
 
\t \t ] 
 
\t \t } 
 
\t ] 
 
}; 
 

 
zingchart.render({ 
 
\t id : 'myChart', 
 
\t data : myConfig, 
 
\t height: 300, 
 
\t width: "100%" 
 
});

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id='myChart'></div> 
 
\t </body> 
 
</html>

fonte

2016-05-23 15:11:34

ZingChart cambia trama CSS in base a X-Scale

risposta

Problemi correlati