边界处的 Zing 散点图节点被切断

Question

我在带有散点图和折线图的应用程序中使用 zing 图表，一切正常，但唯一的问题是散点图节点圆在图表的最末端被切断。

尝试了增加边距、设置偏移量、z-index，但直到现在都没有任何效果，欢迎任何解决方案。

此致，斯姆鲁蒂

Answer 1

在撰写本文时，我能想到的唯一方法是根据您插入图表中的值手动调整 scale-x 和 scale-y 值。也许在渲染图表之前预处理数据以确定最大值的函数是最好的。在下面的示例中，我正在创建 2 个图表。一个具有设定值但不补偿切割边缘的标记，另一个具有将最大 y 值增加 10% 的辅助功能。

然而！ 有一个未发布的属性将出现在我们计划在接下来一两周内发布的下一个版本中。它公开了一个名为 mask-tolerance 的属性，该属性将允许标记流过绘图区域。请留意这一点，因为这是最佳解决方案。 --我在ZingChart团队；如果您还有其他问题，请告诉我。

var myConfig = {
  type: "scatter", 
  plot : {
    marker : {
      size : 10
    }
  },
 series : [
  {
   values : [35,42,67,89,25,100,67,100]
  }
 ],
 plotarea :{
   padding : "10px"
 },
 scaleY : {
   values : "0:90:10"
 }
};

zingchart.render({ 
 id : 'myChart', 
 data : myConfig, 
 height: 200, 
 width: 300 
});


function preProcessData(){
  var myValues = [35,42,67,89,25,100,67,100];
  var maxVal = Math.max.apply(null,myValues);
  var maxScale = maxVal + Math.floor(maxVal * 0.10);
  return {
    type: "scatter", 
    plot : {
      marker : {
        size : 10
      }
    },
   series : [
    {
     values : myValues
    }
   ],
   plotarea :{
     padding : "10px"
   },
   scaleY : {
     values : "0:"+maxScale+":10"
   }
  };  
}

zingchart.render({ 
 id : 'myChart2', 
 data : preProcessData(), 
 height: 200, 
 width: 300 
});

<html>
 <head>
  <script src= 'https://cdn.zingchart.com/zingchart.min.js'></script>
 </head>
 <body>
  <div id='myChart'></div>
  <div id="myChart2"></div>
 </body>
</html>

边界处的 Zing 散点图节点被切断

Zing scatter chart node at border gets chopped off

zingchart