如何在单个系列线图上设置不同的标记



我有不同的库,我试图弄清我们的哪个库在同一单个系列线图上与多个标记一起使用。

说1系列在那里v = [11,12,43,21,22]

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

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

请让我知道是否可以在Zingchart,Devexpress图表,Telerik图表,FLOT图表,Fusion Chart或Wijmo Chart AngularJS库中。

您可以很容易地使用Zingchart进行此操作。我们有一个jsRule,它允许您定义一个函数。在功能中,您返回我们的marker语法以更改marker或节点的样式为其最常见的名称。

另一种方法是在我们的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 A Custom Tip Tip IN IN ZingChart SIUS

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/

相关内容

  • 没有找到相关文章

最新更新