未选择ZingChart节点

我正在使用ZingChart，并试图将3个不同的系列添加到折线图中。问题是，当我这样做时，选择标记不起作用。似乎发生的是，第二个和第三个系列没有像我预期的那样接收到任何事件，而是其他节点接收到了它们。我试图做的事情无效吗？

我想把这些日期分为三组，这样我就可以为每个日期设置不同的标记。如果我能以其他方式设置标记，那也是可以接受的。

var myConfig = {
graphset:[    
{
type:"line",
x:"0%", 
y:"0%",
height:"100%",
width:"100%",
plot: {
selectionMode : 'multiple',
selectedMarker:{ //sets the styling for selected marker (per series)
type:"star5",
backgroundColor:"white",
borderColor:"black",
borderWidth:2,
size:8
}
},
scaleY: {
minValue: 0,
maxValue: 10,
step: 1
},
scaleX: {
//    minValue: 1480883248000,
//    step: 720000,//12min
transform: {
type: 'date',
all: '%m/%d/%y  %h:%i %A'
},
},
series: [
{
text: 'f',
values: [
[1480883248000, 1],
[1480898368000, 1],
[1480883248000, 1],
[1480883968000, 1],
[1480884688000, 1],
[1480885408000, 1],
[1480886128000, 1],
[1480886848000, 1],
[1480887568000, 1],
[1480888288000, 1],
[1480889008000, 1],
[1480889728000, 1],
[1480890448000, 1],
[1480891168000, 1],
[1480891888000, 1],
[1480892608000, 1],
[1480893328000, 1],
[1480894048000, 1],
[1480894768000, 1],
[1480895488000, 1],
[1480896208000, 1],
[1480896928000, 1],
/* [1480897648000, 1, 'n'],
[1480898368000, 1, 'n'],
[1480899088000, 1, 'n'],
[1480899808000, 1, 'n'],
[1480900528000, 1, 'n'],*/

],
marker: {
type: 'circle',
size: 2
}
},
{
text: 'a',
values: [[1480883728000, 1]],

marker: {
type: 'triangle',
size: 7
}

},
{
text: 'n',
values: [[1480894168000, 1]],
marker: {
type: 'square',  //circle
size: 7
}
}
]     
}
]
};
zingchart.render({ 
id : 'myChart', 
data : myConfig, 
height: 400, 
width: "100%" 
});

您需要做几件事。

1) 将selectedMarker属性应用于每个单独的系列对象。系列采用与绘图相同的值。因此，您可以覆盖和重新定义每个series对象中的各个样式。

{
text: 'n',
values: [[1480894168000, 1]],
marker: {
type: 'square',  //circle
size: 7
},
selectedMarker:{ //sets the styling for selected marker (per series)
type:"star6",
backgroundColor:"black",
borderColor:"black",
borderWidth:2,
size:8
}
}
]     
}

如果你使用的是公布的数据，你必须调整两件事。

1) 调整第一个绘图(系列[0])的z-index。将此z-index设置为较低的值将允许您单击放置在其顶部的绘图。

2) 您在series[0].values[1]和series[0].values[2]中的两个时间戳绘制在values阵列中最远的点之外，而在values阵列中的第一个点之前。如果保持数据不变并单击蓝线，它看起来总是选择第一个点。这是真的，因为它实际上是在选择第三个点，这条线跨越了图的前半部分。

尝试单击图表前半部分的蓝线此处为问题图表

如果你仍然不相信我，请分叉上面的演示，并将前两个值从1更改为2和3等…

最终产品(固定数据)如下所示。

var myConfig = {
graphset:[    
{
type:"line",
plot: {
selectionMode : 'multiple',
},
scaleY: {
minValue: 0,
maxValue: 10,
step: 1
},
scaleX: {
//    minValue: 1480883248000,
//    step: 720000,//12min
transform: {
type: 'date',
all: '%m/%d/%y  %h:%i %A'
},
},
series: [
{
zIndex:300,
text: 'f',
values: [
[1480883248000, 1],
//[1480898368000, 1],
//[1480883248000, 1],
[1480883968000, 1],
[1480884688000, 1],
[1480885408000, 1],
[1480886128000, 1],
[1480886848000, 1],
[1480887568000, 1],
[1480888288000, 1],
[1480889008000, 1],
[1480889728000, 1],
[1480890448000, 1],
[1480891168000, 1],
[1480891888000, 1],
[1480892608000, 1],
[1480893328000, 1],
[1480894048000, 1],
[1480894768000, 1],
[1480895488000, 1],
[1480896208000, 1],
[1480896928000, 1],
],
marker: {
type: 'circle',
size: 2
},
selectedMarker:{ //sets the styling for selected marker (per series)
type:"star5",
backgroundColor:"black",
borderColor:"black",
borderWidth:2,
size:8
}
},
{
text: 'a',
values: [[1480883728000, 1]],
marker: {
type: 'triangle',
size: 7
},
selectedMarker:{ //sets the styling for selected marker (per series)
type:"star3",
backgroundColor:"black",
borderColor:"black",
borderWidth:2,
size:8
}
},
{
text: 'n',
values: [[1480894168000, 1]],
marker: {
type: 'square',  //circle
size: 7
},
selectedMarker:{ //sets the styling for selected marker (per series)
type:"star6",
backgroundColor:"black",
borderColor:"black",
borderWidth:2,
size:8
}
}
]     
}
]
};
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>
		<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>

相关内容

最新更新

热门标签：