ZingChartノードが選択されていません

Question

私はZingChartを使用していますが、私は3つの異なる系列を折れ線グラフに追加しようとしています。 問題は、これを行うと、選択マーカーが機能しないということです。 2番目と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 
     } 
    } 
    ]  
} 

投稿されたデータを使用している場合、2つのことを調整する必要があります。

1）最初のプロット（系列[0]）のz-indexを調整します。 z-indexの値を小さくすると、その上に配置されたプロットをクリックすることができます。 series[0].values[1]とseries[0].values[2]であなたのタイムスタンプの

2）二つはvalues、アレイ内の最も遠い点を越えてプロットしvalues配列の最初のポイントの前にプロットされています。データを同じにして青い線をクリックすると、常に最初の点を選択するように見えます。これは、線がプロットの前半に及ぶ第3の点を実際に選択しているため、当てはまります。

あなたはなど、まだ、私を信じていない上記のデモをフォークし、1から2への最初のカップルの値を変更し、3場合は、チャート 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>