ZingChart - 십자선 안의 텍스트에 다른 색상

'plotarea'속성에 crosshairX의 내용을 지정하면 기본적으로 전체 텍스트의 색상이 검정색이됩니다. 이 십자형 텍스트를 두 가지 색상으로 표현하고 싶습니다. 예를 들어, 내 텍스트가 "2016 : 0.07 M"이고, '2016'이 파란색으로 표시되고 빨간색으로 '0.07 M'이 표시되어야한다고 가정합니다. 어떻게이 작업을 수행 할 수 있습니까?ZingChart - 십자선 안의 텍스트에 다른 색상

출처

2016-08-19 Anshul

전체 공개, 나는 징 차트 팀 멤버입니다.

좀 더 구체적인 해결책을 제시하기 위해 텍스트를 표시하는 방법을 알아야합니다. 기본 plotLabel.text를 사용하고 있습니까? 아니면 사용자가 plotLabel.text를 정의 했습니까? 그렇다면 무엇으로 설정 되나요?

텍스트에 대해 정의한 것을 모르는 사이에 색과 텍스트를 적용한 다양한 조합의 데모를 plotLabel에 넣어 자유롭게 가져 왔습니다.

HeaderText에 회색
두 번째 span 태그로의 텍스트 색상을 정의한다 :

는 몇 가지가 여기에 일어나고있다 텍스트에서 검정색으로 텍스트 색상을 정의 중입니다.
plotLable.color 속성이 빨간색이므로 span 태그 외부의 다른 모든 텍스트를 빨간색으로 만듭니다.

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

 
zingchart.render({ 
 
\t id : 'myChart', 
 
\t data : myConfig, 
 
\t height: 350, 
 
\t width: '100%' 
 
});

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

출처

2016-08-19 16:01:40 nardecky

감사 @nardecy. 이것이 바로 제가 성취하고자했던 것입니다. 징 차트는 훌륭합니다 :-) – Anshul

ZingChart - 십자선 안의 텍스트에 다른 색상

답변

관련 문제