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는 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) 첫 번째 플롯 (시리즈 [0])의 z-index을 조정하십시오. 이것을 z-index으로 낮추면 그 위에 놓인 플롯을 클릭 할 수 있습니다. series[0].values[1] 및 series[0].values[2]에서

당신의 타임 스탬프의

2) 두 는 values 배열의 가장 먼 지점을 넘어 플롯과 values 배열의 첫 번째 포인트 전에 그려진다. 데이터를 동일하게 유지하고 파란색 선을 클릭하면 항상 첫 번째 점을 선택하는 것처럼 보입니다. 라인이 음모의 전반부에 걸쳐있는 세 번째 포인트를 실제로 선택하기 때문에 이것은 사실입니다. 당신은 여전히 ​​저를 믿지 않는 경우에, 위의 데모를 포크 등 2, 3 1에서 처음 몇 값을 변경 issue chart here

차트의 상반기 파란색 선에

에 한번의 클릭 ..

최종 제품 (고정 데이터)은 다음과 같습니다.

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({ 
 
\t id: 'myChart', 
 
\t data: myConfig, 
 
\t height: '100%', 
 
\t width: '100%' 
 
});

html, body { 
 
\t height:100%; 
 
\t width:100%; 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
#myChart { 
 
\t height:100%; 
 
\t width:100%; 
 
\t min-height:150px; 
 
} 
 
.zc-ref { 
 
\t display:none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div> 
 
\t </body> 
 
</html>