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

标签 charts zingchart

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

最佳答案

完全披露,我是 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>

    关于charts - ZingChart - 十字准线中文本的不同颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39035628/

    相关文章:

    javascript - 绘图工具 - Angular2

    javascript - ZingChart 饼图工具提示不显示

    javascript - 如何从 Google 图表时间轴隐藏条形标签

    javascript - 如何根据 .csv 报告中的数值以及动态创建表格时更改表格单元格颜色?

    php - Google Charts 日期时间问题,现在不显示 JSON 数据

    javascript - Zingchart:无法正常工作?引用错误:未定义zingchart

    html - Zing Chart 堆积图

    JavaFx : Processing Events for a Pie Chart

    python - x 轴刻度线未出现在图表中

    charts - Zingchart 点击事件处理