我在AngularJS中使用ZingChart。ZingChart根據X-Scale改變陰謀CSS
我有一個簡單的圖表，但我想我的情節是紅色，如果它是過去（如果x日期<當前日期）。
我發現我可以設置一定的規則來
"plot":{
"rules":[
{
"rule":"%v 20 && %v < 30",
"line-color":"#f93",
"line-width":"8",
"line-style":"dashed"
},
]
這是會改變的CSS如果情節值20-30之間。我的問題是 - > 如何根據X-scale值更改繪圖背景顏色？我無法參照劇情屬性上的x尺度屬性。
您會尋找％scale-key-text標記而不是簡單的％v。 ％scale-key-text將以scale-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>