Zingchart：使用标记在规则中定位多个系列

Question

我想知道是否可以使用令牌在同一规则中定位多个系列。本质上，我的目标是 "if the value from series 1 is greater than the value in the same position in series 2, change some styles".

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 及更低版本），无法跨不同系列值应用规则逻辑。解决此问题的最佳方法是使用 "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>

Zingchart：使用标记在规则中定位多个系列

Zingchart: Target multiple series in a rule using tokens

javascript

zingchart