Question

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

让我们说1系列是v = [11,12,43,21,22]

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

我尝试浏览文档但找不到任何内容。

请告诉我ZingChart，devexpress图表，telerik图表，flot图表，融合图表或wijmo chart angularJs库是否可行。

Answer 1

你可以很容易地使用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%' });的硬编码形式。

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

＆＃13;

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

＆＃13;

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

＆＃13;

private static Date removeTime(Date date) {
    Calendar cal = Calendar.getInstance();
    cal.setTime(date);
    cal.set(Calendar.HOUR_OF_DAY, 2);
    cal.set(Calendar.MINUTE, 30);
    cal.set(Calendar.SECOND, 30);
    cal.set(Calendar.MILLISECOND, 50);
    return cal.getTime();
}

public static boolean isImportantDay(Date date, Date selectedDate, int period, int numDays) {
    date = removeTime(date);
    selectedDate = removeTime(selectedDate);
    long milDate = date.getTime();
    long milSelDate = selectedDate.getTime();
    long temp = milSelDate - milDate;
    long dayIntervalMs = TimeUnit.DAYS.toMillis(period);
    Log.i("DATE", String.valueOf(selectedDate));

    if(temp% dayIntervalMs == 0){
        Log.i("SI", String.valueOf(temp));
        return true;
    }
    Log.i("NO", String.valueOf(temp));
    return false;
}

＆＃13;

参考文献：

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/

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

1 个答案: