Question

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

Answer 1

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

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

＆＃13;

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 
});

＆＃13;

<!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>

＆＃13;

Zingchart：使用令牌在规则中定位多个系列

1 个答案: