6

我想知道是否可以使用令牌在同一规则中定位多个系列。本质上，我的目标是“如果系列 1 的值大于系列 2 中相同位置的值，则更改一些样式”。

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 值时更改单个点的样式。

4

1 回答 1

5

在撰写本文时（v2.1.4 及更低版本），无法跨不同系列值应用规则逻辑。解决此问题的最佳方法是使用“data-”作为键值来引用每个系列对象中的每个系列值数组。（请参见下面的工作示例）。

话虽如此，我已经提交了一张票，以研究在规则语法中实现跨系列逻辑！--我在 ZingChart 的开发团队中，如有任何进一步的问题，请随时与我们联系。

var ruleSet = 
[
    //Controls the series 0 coloring
   {
     rule : "%data-series-1 > %v",
	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 = {
 	type: "scatter", 
 	plot :{
 	  marker : {
 	    rules : ruleSet
 	  }
 	},
	series : [
		{
			values : series0Values,
			"data-series-1" : series1Values,
			marker : {
		    backgroundColor : "#00c0ef",
        borderColor : "#00c0ef"
		  }
		},
		{
			values : series1Values,
			"data-series-0" : series0Values,
			marker : {
		    backgroundColor : "#26de00",
        borderColor : "#26de00"
		  }
		},
		
	]
};

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

于 2015-10-15T18:21:22.880 回答