我正在使用ZingChart和AngularJS.
我有一个简单的图表,但我想我的情节是红色的,如果它是在过去(如果x尺度日期<当前日期). 我发现我可以设置一些规则
"plot":{
"rules":[
{
"rule":"%v 20 && %v < 30","line-color":"#f93","line-width":"8","line-style":"dashed"
},]
如果情节值在20-30之间,哪个会改变css.我的问题是 – >
如何在X刻度值上更改绘图背景颜色依赖？我无法在情节属性上引用x-scale propery ..
您将寻找％scale-key-text标记,而不仅仅是％v. ％scale-key-text将以scale-x轴为目标.
http://www.zingchart.com/docs/basic-elements/zingchart-tokens/
原文链接：https://www.f2er.com/angularjs/240608.htmlhttp://www.zingchart.com/docs/basic-elements/zingchart-tokens/
var myConfig = {
"type": "line","title":{
"text":"%scale-key-value"
},"subtitle":{
"text":"the parsed value"
},"crosshair-x":{
"plot-label":{
"text":"%scale-key-value: $%v","decimals":2,"transform":{
"type":"date","all":"%g:%i %A"
}
},"scale-label":{
"visible":false
}
},"plot":{
"tooltip":{
"visible":false
},"rules": [
{
rule: "%scale-key-text > 1457116200000",lineColor: "red"
}
]
},"utc":true,"timezone":-5,"scale-x":{
"min-value":"1457101800000","max-value":"1457125200000","step":"30minute","transform":{
"type":"date","all":"%g:%i"
},"label":{
"text":"Trading Day"
},"item":{
"font-size":10
},"max-items":14,},"scale-y":{
"values":"30:34:1","format":"$%v","label":{
"text":"Price"
},"item":{
"font-size":10
}
},"series": [
{
"values":[
[1457101800000,30.34],//03/04/2016 at 9:30 a.m. EST (which is 14:30 in GMT)
[1457103600000,31.30],//10:00 a.m.
[1457105400000,30.95],//10:30 a.m.
[1457107200000,30.99],//11:00 a.m.
[1457109000000,32.33],//11:30 a.m.
[1457110800000,33.34],//12:00 p.m.
[1457112600000,33.01],//12:30 p.m.
[1457114400000,34],//1:00 p.m.
[1457116200000,33.64],//1:30 p.m.
[1457118000000,32.59],//2:00 p.m.
[1457119800000,32.60],//2:30 p.m.
[1457121600000,31.99],//3:00 p.m.
[1457123400000,31.14],//3:30 p.m.
[1457125200000,32.34],//at 4:00 p.m. EST (which is 21:00 GMT)
]
}
]
};
zingchart.render({
id : 'myChart',data : myConfig,height: 300,width: "100%"
});
<!DOCTYPE html> <html> <head> <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> </head> <body> <div id='myChart'></div> </body> </html>
