如何在单系列折线图上设置不同的标记?
How to set different markers on single series line chart?
我有不同的库,我试图找出我们的哪个库在同一个单系列折线图上使用多个标记。
假设有 1 个系列 v = [11, 12, 43, 21, 22]
我要点11是长方形,12是同心圆,43是正方形,21和22是圆。
我尝试浏览文档,但找不到任何内容。
如果可以在 ZingChart、devexpress 图表、telerik 图表、flot 图表、融合图表或 wijmo 图表 angularJs 库中使用,请告诉我。
您可以使用 ZingChart 轻松做到这一点。我们有一个 jsRule
允许你定义一个函数。在函数中,您 return 我们的 marker
语法将 marker
或节点的样式更改为其最常见的名称。
另一种方法是在我们的 rules
中显式编码语法,这是 jsRule
的硬编码形式。
我在下面的演示中都添加了。您可以将 marker 对象的任何属性添加到以下语法中。
/*
* 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://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 个系列 v = [11, 12, 43, 21, 22]
我要点11是长方形,12是同心圆,43是正方形,21和22是圆。
我尝试浏览文档,但找不到任何内容。
如果可以在 ZingChart、devexpress 图表、telerik 图表、flot 图表、融合图表或 wijmo 图表 angularJs 库中使用,请告诉我。
您可以使用 ZingChart 轻松做到这一点。我们有一个 jsRule
允许你定义一个函数。在函数中,您 return 我们的 marker
语法将 marker
或节点的样式更改为其最常见的名称。
另一种方法是在我们的 rules
中显式编码语法,这是 jsRule
的硬编码形式。
我在下面的演示中都添加了。您可以将 marker 对象的任何属性添加到以下语法中。
/*
* 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://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/