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

【问题标题】：ZingChart - Different colors for text in crosshairZingChart - 十字准线中文本的不同颜色
【发布时间】：2016-08-19 09:29:26
【问题描述】：

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

【问题讨论】：

标签： charts zingchart

【解决方案1】：

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

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

在不知道您为文本定义了什么的情况下，我冒昧地将颜色和文本的不同组合应用到plotLabel 的演示放在一起。

这里发生了几件事：

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

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%' 
});

<!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>

【讨论】：

谢谢@nardecy。这正是我想要实现的。 Zingchart 很好:-)