ZingChart 根据 X-Scale 更改绘图 CSS答案

【问题标题】：ZingChart change plot CSS depending on X-ScaleZingChart 根据 X-Scale 更改绘图 CSS
【发布时间】：2016-05-23 11:32:55
【问题描述】：

我正在使用带有 AngularJS 的 ZingChart。

我有一个简单的图表，但如果它是过去的（如果 x 比例日期

我发现我可以设置一些规则来

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

如果绘图值在 20-30 之间，css 会发生什么变化。我的问题是-> 如何根据 X 比例值更改绘图背景颜色？我无法在 plot 属性上引用 x-scale 属性..

【问题讨论】：

标签： angularjs charts zingchart

【解决方案1】：

您将寻找 %scale-key-text 标记而不是简单的 %v。 %scale-key-text 将针对 scale-x 轴。 http://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>

【讨论】：