ZingChart

Question

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

Answer 1

完全公开，我是 ZingChart 团队的成员。

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

在不知道您为文本定义了什么的情况下，我冒昧地制作了一个演示，演示了将颜色和文本应用到 plotLabel.

的不同组合

这里发生了几件事：

headerText 将其文本颜色定义为灰色
文本中的第一个 span 标签继承了 %color 的绘图颜色
text 中的第二个 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>

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

ZingChart - Different colors for text in crosshair

charts