如何设置Zingchart线边框?

时间:2015-12-08 11:04:32

标签: zingchart

是否可以在zingchart中绘制带边框的线?

我有一个

"type" : "line",
"values"     : [something],
"line-color": "#somecolor",

但添加"border-color" : "#something""border-width" : 3px并不能做到。

我已经尝试了文档,但除了条形系列类型之外,我还没有发现任何相关内容。

编辑:忘了说,我是混合型图表(条形+线条),我可以设置边框为" bar"类型系列,但不是" line"类型。

1 个答案:

答案 0 :(得分:4)

ZingChart的绘图引擎模仿了很多SVG的绘制方式,因此线条本身没有边界。然而,在真正的SVG方式中,我们有一个名为top-state的属性,允许用户复制要放置在现有形状顶部的形状。

要模拟线条周围的边框,我们可以使顶部状态线宽的大小比绘制线宽更细。

如果您需要任何进一步的帮助,请随时联系我 - 我是ZingChart团队的一员

var myConfig = {
 	type: "mixed", 
	series : [
		{
		  type : 'bar',
			values : [35,42,67,89,25,34,67,85]
		},
		{
		  type : 'line',
			values : [35,42,67,89,25,34,67,85],
			lineWidth : "6px",
			topState : {
			  lineWidth : "2px",
			  lineColor : "pink"
			}
		}
	]
};

zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 400, 
	width: 600 
});
<!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id='myChart'></div>
	</body>
</html>