如何在单系列折线图上设置不同的标记？

Question

我有不同的库，我试图找出我们的哪个库在同一个单系列折线图上使用多个标记。

假设有 1 个系列 v = [11, 12, 43, 21, 22]

我要点11是长方形，12是同心圆，43是正方形，21和22是圆。

我尝试浏览文档，但找不到任何内容。

如果可以在 ZingChart、devexpress 图表、telerik 图表、flot 图表、融合图表或 wijmo 图表 angularJs 库中使用，请告诉我。

Answer 1

您可以使用 ZingChart 轻松做到这一点。我们有一个 jsRule 允许你定义一个函数。在函数中，您 return 我们的 marker 语法将 marker 或节点的样式更改为其最常见的名称。

另一种方法是在我们的 rules 中显式编码语法，这是 jsRule 的硬编码形式。

我在下面的演示中都添加了。您可以将 marker 对象的任何属性添加到以下语法中。

/*
 * 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/

如何在单系列折线图上设置不同的标记？

How to set different markers on single series line chart?

telerik

devexpress

fusioncharts

zingchart

wijmo5