如果我们在 'plotarea' 属性中指定 crosshairX 的内容,默认情况下整个文本的颜色变为黑色。我想用两种不同的颜色表示这个十字准线文本。例如,假设我的文本是“2016 : 0.07 M”,那么“2016”应显示为蓝色,“0.07 M”应显示为红色。
我们怎样才能做到这一点?
最佳答案
完全披露,我是 ZingChart 团队的成员。
我需要知道您如何显示文本以获得更具体的解决方案。您是使用默认的 plotLabel.text 还是有用户定义的 plotLabel.text?如果是这样,它设置为什么?
在不知道您为文本定义的内容的情况下,我冒昧地将颜色和文本应用于 plotLabel 的不同组合的演示放在一起。 .
这里发生了几件事:
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>
关于charts - ZingChart - 十字准线中文本的不同颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39035628/