Question

如果我们在'plotarea'属性中指定crosshairX的内容，默认情况下整个文本的颜色变为黑色。我想以两种不同的颜色来表示十字准线的这个文本。例如，假设我的文字是“2016：0.07 M”，那么'2016'应该以蓝色显示，'0.07 M'显示为红色。我们怎样才能做到这一点？

Answer 1

完全披露，我是ZingChart团队的成员。

我需要知道如何显示文字以获得更具体的解决方案。您使用默认的plotLabel.text还是有用户定义的plotLabel.text？如果是这样，它设置为什么？

在不知道您为文本定义了什么的情况下，我可以自由地将颜色和文本的不同组合演示到plotLabel。

这里发生了一些事情：

headerText将其文本颜色定义为灰色
文本中的第一个span标记是使用％color继承绘图颜色
文本中的第二个span标记将其文本颜色定义为黑色
plotLable.color属性为红色，使span标记之外的所有其他文本都为红色

＆＃13;

var myConfig = {
 	type: "line",
 	scaleX:{
 	  values:['Mon','Tue','Wed','Th','Fri','Sat','Sun']
 	},
 	crosshairX:{
 	  plotLabel:{
 	    headerText:'<span style="color:#777">Header Text</span>',
 	    text:'<span style="color:%color">%kv</span>: <span style="color:black">%v</span> Extra Text...',
 	    color:'red'
 	  }
 	},
	series : [
		{
			values : [35,42,67,89,25,34,67]
		},
		{
			values : [35,42,67,89,25,34,67].sort()
		}
	]
};

zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 350, 
	width: '100%' 
});

＆＃13;

<!DOCTYPE html>
<html>
	<head>
	<!--Assets will be injected here on compile. Use the assets button above-->
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
		<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";</script>
	<!--Inject End-->
	</head>
	<body>
		<div id='myChart'></div>
	</body>
</html>

＆＃13;

ZingChart - 十字准线中文本的不同颜色

1 个答案: