2015-10-15 42 views
6

我想知道是否有可能在目標使用令牌相同的規則多個系列。實質上,我的目標是「如果系列1的值大於系列2中相同位置的值,則改變一些樣式」。Zingchart:目標多系列在規則中使用令牌

Zingchart配置:

var config = { 
    // ... 
    'type': 'area', 
    'plot': { 
    'rules': [ 
     { 
     'rule': '', // %v from series 1 > %v from series 2 
     'background-color': '#ccc' 
     } 
    ] 
    }, 
    'series': [ 
    { 
     'text': 'Series 1', 
     'values': [36, 40, 38, 47, 49, 45, 48, 54, 58, 65, 74, 79, 85, 83, 79, 71, 61, 55] 
    }, 
    { 
     'text': 'Series 2', 
     'values': [40, 40, 40, 50, 50, 50, 50, 60, 60, 80, 80, 80, 80, 80, 80, 80, 60, 60] 
    } 
    ] 
} 

如果這是不可能的,有另一種方式來達到同樣的結果?當系列1值大於系列2值時,我打算更改單個點的樣式。

回答

5

此時寫入(v2.1.4及以下),有沒有辦法在不同系列的數值適用規則邏輯。解決這個問題的最好方法是使用「data-」作爲關鍵值來引用每個系列對象中的每個系列值數組。 (請參閱下面的工作示例)。據說,我已經提交了一張票來研究如何將跨系列邏輯實現到規則語法中! - 我在ZingChart的開發團隊中,隨時提出任何進一步的問題。

var ruleSet = 
 
[ 
 
    //Controls the series 0 coloring 
 
    { 
 
    rule : "%data-series-1 > %v", 
 
\t backgroundColor : "#007c9b", 
 
     borderColor : "#006a84", 
 
     size : "8px" 
 
    }, 
 
    
 
    //Controls the series 1 coloring 
 
    { 
 
     rule : "%data-series-0 > %v", 
 
     backgroundColor : "#188f00", 
 
     borderColor : "#188f00", 
 
     size : "8px" 
 
    } 
 
]; 
 
    
 
var series0Values = [10,10,20,10,10,10,10,10]; 
 
var series1Values = [20,20,10,20,20,20,20,20]; 
 
    
 
var myConfig = { 
 
    \t type: "scatter", 
 
    \t plot :{ 
 
    \t marker : { 
 
    \t  rules : ruleSet 
 
    \t } 
 
    \t }, 
 
\t series : [ 
 
\t \t { 
 
\t \t \t values : series0Values, 
 
\t \t \t "data-series-1" : series1Values, 
 
\t \t \t marker : { 
 
\t \t  backgroundColor : "#00c0ef", 
 
     borderColor : "#00c0ef" 
 
\t \t } 
 
\t \t }, 
 
\t \t { 
 
\t \t \t values : series1Values, 
 
\t \t \t "data-series-0" : series0Values, 
 
\t \t \t marker : { 
 
\t \t  backgroundColor : "#26de00", 
 
     borderColor : "#26de00" 
 
\t \t } 
 
\t \t }, 
 
\t \t 
 
\t ] 
 
}; 
 

 
zingchart.render({ 
 
\t id : 'myChart', 
 
\t data : myConfig, 
 
\t height: 400, 
 
\t width: 400 
 
});
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t \t <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/"; 
 
\t </head> 
 
\t <body> 
 
\t \t <div id='myChart'></div> 
 
\t </body> 
 
</html>

+0

我最終嘗試一些東西,涉及這樣做之前呈現圖表的值比較,然後使用'選擇-state'具有靜態'selection'陣列。這看起來更有效率。 但是,我想知道如何使用上述方法在區域或折線圖上的單點後面繪製背景顏色。這不是我想要的標記本身,但根據文檔,我無法直接在'plot'上定義'rules'。 [示例](http://i.imgur.com/39LWOLN.png) –

+1

沒關係 - 你確實可以定義'rules'直接'plot'。問題解決了。 –