Как установить разные маркеры на линейном графике одной серии?

У меня есть разные библиотеки, которые я пытаюсь изобразить, которые работают с несколькими маркерами на одной линейной диаграмме одной серии.

Допустим, есть 1 серия v = [11, 12, 43, 21, 22]

Я хочу, чтобы точка 11 была прямоугольной, 12 - концентрической окружностью, 43 - квадратной, а 21 и 22 - окружностью.

Я попытался просмотреть документы, но ничего не смог найти.

Пожалуйста, дайте мне знать, если это возможно в библиотеках ZingChart, devexpress, telerik, flot, fusion или wijmo chart angularJs.

Источник

1 ответ

Решение

Вы можете сделать это с ZingChart очень легко. У нас есть jsRule который позволяет вам определить функцию. В рамках функции вы возвращаете наш marker Синтаксис для изменения стиля marker или узел в качестве его наиболее распространенного имени.

Другой способ заключается в явном кодировании синтаксиса в нашем rules которая является жестко закодированной формой jsRule,

Я добавил оба в следующей демонстрации. Вы можете добавить любые атрибуты из объекта- маркера в следующий синтаксис.

/*
 * callback argument format:
 {
   "id":"myChart",
   "graphid":"myChart-graph-id0",
   "graphindex":0,
   "plotid":"",
   "plotindex":0,
   "nodeindex":7,
   "key":7,
   "scaleval":7,
   "scaletext":"7",
   "value":85,
   "text":"%v",
   "ev":null
 }
 */
window.changeMarker = function(e) {
  // this function is called once for every node
  var returnObj = {
    type: 'square'
  }
  
  if (e.nodeindex % 2 == 0) {
    returnObj.type = 'star5';
    returnObj.backgroundColor = 'black';
    returnObj.size = 10;
  }
  // you can put any sort of logic to transform the marker nodes
  //console.log(JSON.stringify(e))
  return returnObj;
}
var myConfig = {
  type: 'line', 
 series: [
  {
   values: [35,42,67,89,25,34,67,85],
   marker: {
     jsRule: 'changeMarker()'
   }
  },
  { // you can also explicitly set them with rules
   values: [135,142,167,189,125,134,167,185],
   marker: {
     rules: [
       {
         rule: '%i == 0',
         type: 'square'
       },
       {
         rule: '%i == 1',
         type: 'triangle',
         size:10
       },
       {
         rule: '%i == 2',
         type: 'star5'
       },
       {
         rule: '%i == 3',
         type: 'diamond',
         backgroundColor: 'black'
       },
       {
         rule: '%i == 4',
         type: 'plus',
         size:15
       },
       {
         rule: '%i == 5',
         type: 'star3',
         size:12
       },
       {
         rule: '%i == 6',
         type: 'rpoly6',
         size:9
       },
       {
         rule: '%i == 7',
         type: 'star4',
         size: 6
       }    
     ]
   }
  }
 ]
};

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>
 <!--Assets will be injected here on compile. Use the assets button above-->
  <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>

Рекомендации:

https://blog.zingchart.com/2016/05/09/make-a-custom-tooltip/?q=make%20a%20custom%20tooltip%20in%20zingchart%20using%20functions

https://www.zingchart.com/docs/tutorials/chart-elements/create-javascript-rules/

https://www.zingchart.com/docs/api/json-configuration/graphset/plot/marker/

https://www.zingchart.com/docs/api/json-configuration/graphset/plot/rules/

Источник
Другие вопросы по тегам