ZingChart Knoten sind nicht ausgewählt

Question

Ich verwende ZingChart und ich versuche, 3 verschiedene Serien zu einem Liniendiagramm hinzuzufügen. Das Problem ist, dass der Auswahlmarker nicht funktioniert, wenn ich dies tue. Was scheint zu passieren ist, dass die zweite und dritte Serie keine Ereignisse erhalten, wie ich erwarten würde und stattdessen andere Knoten erhalten. Ist was ich versuche, ungültig zu machen?

Ich möchte diese Daten in 3 Sätzen gruppieren, so dass ich für jeden einen anderen Marker setze. Wenn ich den Marker auf eine andere Weise setzen könnte, wäre das auch akzeptabel.

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

Es gibt einige Dinge, die Sie tun müssen.

1) Wenden Sie das Attribut selectedMarker auf jedes einzelne Serienobjekt an. Series nimmt die gleichen Werte wie Plot. So können Sie das individuelle Styling innerhalb jedes Objekts überschreiben und neu definieren.

{ 
     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 
     } 
    } 
    ]  
} 

Wenn Sie die gebuchten Daten verwenden, müssen Sie zwei Dinge anpassen.

1) Passen Sie die z-index der ersten Grafik (Serie [0]) an. Wenn Sie den Wert z-index auf einen niedrigeren Wert setzen, können Sie auf die darüber liegenden Plots klicken.

2) Zwei Ihrer Zeitstempel in series[0].values[1] und series[0].values[2] werden über den am weitesten entfernten Punkt in der values Array aufgetragen und aufgetragen, bevor der erste Punkt in der values Array. Wenn Sie die Daten beibehalten und auf die blaue Linie klicken, sieht es immer so aus, als ob Sie den ersten Punkt ausgewählt haben. Dies ist richtig, weil es wirklich den 3. Punkt auswählt, über den die Linie die erste Hälfte der Handlung überspannt.

Versuchen Sie eine auf der blauen Linie für die erste Hälfte des Diagramms issue chart here

Wenn Sie immer noch glauben mir nicht, die Demo über Gabel und die ersten paar Werte von 1 bis 2 und 3 usw. ändern ..

Das Endprodukt (feste Daten) sieht wie folgt aus.

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>