我正在使用ZingChart而我正尝试在折线图中添加3个不同的系列。 问题是当我这样做时，选择标记不起作用。 似乎发生的事情是第二和第三系列没有像我期望的那样接收任何事件，而是其他节点接收它们。 我试图做的事情无效吗？
我想将这些日期分为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%"
});
答案 0 :(得分：4)
您需要做几件事。
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）调整第一个图的z-index（系列[0]）。将此z-index设置为较低的值将允许您单击放置在其上的图。
2）series[0].values[1]和series[0].values[2]中的两个时间戳超出values数组中的最远点，并在values数组中的第一个点之前绘制。如果保持数据相同并单击蓝线，它总是看起来像是选择第一个点。这是真的，因为它确实选择了该线跨越图的前半部分的第3个点。
尝试点击图表前半部分的蓝线 issue chart here
如果您仍然不相信我，请在上面演示并将前几个值从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>