Zingchart:使用令牌在规则中定位多个序列

Zingchart: Target multiple series in a rule using tokens

本文关键字：定位 规则 令牌 Zingchart      更新时间：2023-09-26

我想知道是否有可能在使用令牌的同一规则中针对多个系列。从本质上讲，我的目标是"如果系列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的值时，我的目标是改变单个点的样式。

在编写本文时(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>

相关文章：