ZingChart - 不同顏色的文字在十字線上

如果我們在'plotarea'屬性中指定crosshairX的內容，默認情況下整個文本的顏色變成黑色。我想用兩種不同的顏色來表示十字準線的文字。例如，假設我的文本是「2016：0.07 M」，那麼'2016'應該以藍色顯示，'0.07 M'以紅色顯示。我們怎樣才能做到這一點？ZingChart - 不同顏色的文字在十字線上

來源

2016-08-19 Anshul

完全披露，我是ZingChart團隊的成員。

我需要知道你是如何顯示你的文本以獲得更具體的解決方案。您是使用默認的plotLabel.text還是您有用戶定義的plotLabel.text？如果是這樣，它是什麼？

不知道您爲文本定義了什麼，我冒昧地將顏色和文本應用到plotLabel的不同組合的演示。

有幾件事情發生在這裏：

HEADERTEXT是定義其文本顏色爲灰色
在文本中的第一跨度標籤被繼承的情節色彩搭配％色
第二span標記在文本中將其文本顏色定義爲黑色
plotLable.color屬性爲紅色，使所有其他文本都在範圍標籤之外紅色

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。這正是我想要實現的。 Zingchart很好:-) – Anshul

ZingChart - 不同顏色的文字在十字線上

回答

相關問題