Узел точечной диаграммы Zing на границе отрубается

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

Пробовал увеличивать запас, устанавливать смещение, z-индекс и у меня ничего не получалось до сих пор, любое решение приветствуется.

С уважением, Смрути

Источник

1 ответ

Решение

На данный момент я могу думать только о том, чтобы вручную настроить значения scale-x и scale-y на основе значений, которые вы вставляете в диаграмму. Возможно, лучше использовать функцию предварительной обработки данных для определения максимального значения перед рендерингом диаграммы. В приведенном ниже примере я создаю 2 графика. Один с заданными значениями, но не компенсирующий маркеры, обрезающие кромку, а другой с вспомогательной функцией для увеличения максимального значения y на 10%.

ТЕМ НЕ МЕНИЕ! Имеется невыпущенный атрибут, который будет в следующем выпуске, который мы планируем в течение следующей недели или двух. Он предоставляет атрибут с именем mask-допуск, который позволит маркерам проходить через область графика. Следите за этим, так как это оптимальное решение. - Я в команде 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>

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