Узлы 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) Отрегулируйте z-index первого участка (серия [0]). Сделав это 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({ 
 
\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>