未选择ZingChart节点

Question

我正在使用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%" 
});

Answer 1

有几件事你需要做。

1)将selectedMarker属性应用于每个单独的系列对象。序列采用与plot相同的值。因此，您可以覆盖和重新定义每个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。将此z-index设置为较低的值将允许您单击放置在其上的绘图。

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

尝试单击图表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>

​