javascript - 未选择 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 属性应用于每个单独的系列对象。系列采用与绘图相同的值。因此，您可以覆盖和重新定义每个 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) 调整第一个图 (series[0]) 的 z-index。将此 z-index 设置为较低的值将允许您单击放置在其顶部的图。

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

尝试点击图表前半部分的蓝线 issue chart here

如果您仍然不相信我，请 fork 上面的演示并将前几个值从 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>