telerik - 如何在单系列折线图上设置不同的标记？

Question

我有不同的库，我试图找出我们的哪个库与同一个系列折线图上的多个标记一起使用。

假设有 1 个系列 v = [11, 12, 43, 21, 22]

我希望点 11 是矩形，12 是同心圆，43 是正方形，21 和 22 是圆形。

我尝试浏览文档但找不到任何东西。

请让我知道它是否可能在 ZingChart、devexpress chart、telerik chart、flot chart、fusion chart 或 wijmo chart angularJs 库上。

score 3 · Accepted Answer

你可以很容易地用 ZingChart 做到这一点。我们有一个jsRule允许您定义一个函数的函数。在函数中，您返回我们的marker语法以将markeror 节点的样式更改为其最常用的名称。

另一种方法是在我们的语法中显式编码，rules这是jsRule.

我在下面的演示中添加了两者。您可以将标记对象中的任何属性添加到以下语法中。

/*
 * callback argument format:
 {
   "id":"myChart",
   "graphid":"myChart-graph-id0",
   "graphindex":0,
   "plotid":"",
   "plotindex":0,
   "nodeindex":7,
   "key":7,
   "scaleval":7,
   "scaletext":"7",
   "value":85,
   "text":"%v",
   "ev":null
 }
 */
window.changeMarker = function(e) {
  // this function is called once for every node
  var returnObj = {
    type: 'square'
  }
  
  if (e.nodeindex % 2 == 0) {
    returnObj.type = 'star5';
    returnObj.backgroundColor = 'black';
    returnObj.size = 10;
  }
  // you can put any sort of logic to transform the marker nodes
  //console.log(JSON.stringify(e))
  return returnObj;
}
var myConfig = {
 	type: 'line', 
	series: [
		{
			values: [35,42,67,89,25,34,67,85],
			marker: {
			  jsRule: 'changeMarker()'
			}
		},
		{ // you can also explicitly set them with rules
			values: [135,142,167,189,125,134,167,185],
			marker: {
			  rules: [
			    {
			      rule: '%i == 0',
			      type: 'square'
			    },
			    {
			      rule: '%i == 1',
			      type: 'triangle',
			      size:10
			    },
			    {
			      rule: '%i == 2',
			      type: 'star5'
			    },
			    {
			      rule: '%i == 3',
			      type: 'diamond',
			      backgroundColor: 'black'
			    },
			    {
			      rule: '%i == 4',
			      type: 'plus',
			      size:15
			    },
			    {
			      rule: '%i == 5',
			      type: 'star3',
			      size:12
			    },
			    {
			      rule: '%i == 6',
			      type: 'rpoly6',
			      size:9
			    },
			    {
			      rule: '%i == 7',
			      type: 'star4',
			      size: 6
			    }    
			  ]
			}
		}
	]
};

zingchart.render({ 
	id: 'myChart', 
	data: myConfig, 
	height: '100%', 
	width: '100%' 
});

html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
#myChart {
	height:100%;
	width:100%;
	min-height:150px;
}
.zc-ref {
	display:none;
}

<!DOCTYPE html>
<html>
	<head>
	<!--Assets will be injected here on compile. Use the assets button above-->
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
	</body>
</html>

参考：

https://blog.zingchart.com/2016/05/09/make-a-custom-tooltip/?q=make%20a%20custom%20tooltip%20in%20zingchart%20using%20functions

https://www.zingchart.com/docs/tutorials/chart-elements/create-javascript-rules/

https://www.zingchart.com/docs/api/json-configuration/graphset/plot/marker/

https://www.zingchart.com/docs/api/json-configuration/graphset/plot/rules/