Zingchart：トークンを使用してルール内で複数のシリーズをターゲットにする

トークンを使用して同じルールで複数のシリーズをターゲット設定できるかどうかは疑問です。本質的に、私が目指しているのは、 "系列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の値よりも大きい場合、個々のポイントのスタイルを変更することを目指しています。

出典

2015-10-15 Tom Fairbairn

この時点（v2.1.4以下）では、異なる論理値にルールロジックを適用する方法がありません。これにアプローチする最善の方法は、キー値として「データ」を持つ各シリーズオブジェクト内の各シリーズ値配列を参照することです。（実際の例については以下を参照してください）。

これは、ルールの構文にクロスシリーズのロジックを実装するためのチケットを提出しました！ - 私は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>

出典

2015-10-15 18:21:22

は、私は、静的 'selection'配列と'選択-state'を使用して、チャートをレンダリングする前に、値の比較を行っている関係に何かをしようとしてしまいました。これははるかに効率的に見えます。しかし、上記の方法を使って、領域または折れ線グラフ上の単一点の背後にプロット領域の背景色をスタイルする方法が不思議です。私がスタイルを設定したいのはマーカーそのものではありませんが、ドキュメントによれば 'plot'に直接' rules'を定義することはできません。 [例] –

気にすることはありません。実際に 'plot'に' rules'を直接定義できます。問題が解決しました。 –

Zingchart：トークンを使用してルール内で複数のシリーズをターゲットにする

答えて

関連する問題