[GitHub] [incubator-echarts] suremicro commented on issue #8841: min/max on yAxis for bar charts, makes the bars go outside limits

[GitBox <gi...@apache.org>]

suremicro commented on issue #8841:
URL: https://github.com/apache/incubator-echarts/issues/8841#issuecomment-716416715


   You example doesn't include the layout clipping function??? You need to add the function and register it using the global echarts function. If you try the code below in your jsfiddle example it will clip the bars ;)
   
   `
   echarts.registerLayout(chartLayout);
   var container = document.getElementById('main');
   var chart = echarts.init(container);
   
   const min = "2020-11-25T06:10";
   const max = "2020-11-25T08:10";
   function getData() {
         const data = [];
         let now = +new Date(2020, 10, 25);
         const oneDay = 10 * 60 * 1000;
         const randomData = ()=> {
           now = new Date(+now + oneDay);
           return {
             value: [
               now.toISOString().substring(0,16),
               Math.floor(Math.random() * 100),
             ],
           };
         };
         for (let i = 0; i < 72; i++) {
           data.push(randomData());
         }
         return data;
   }
   
               function chartLayout(ec) {
   
                   ec.eachSeries(seriesComponent => {
   
                       var data = seriesComponent.getData();
   
                       data.each(idx => {
   
                           var layout = data.getItemLayout(idx);
   
                           if (layout) {
   
                               var rect = seriesComponent.coordinateSystem.grid.getRect();
                               
                               if (layout.x < rect.x) {
                                   layout.width = layout.width - (rect.x - layout.x);
                                   layout.x = rect.x;
                               }
   
                               if (layout.x + layout.width > rect.x + rect.width) {
                                   layout.width = rect.x + rect.width - layout.x;
                               }
   
                               if (layout.width < 0) layout.width = 0;
   
                               if (layout.y > rect.y + rect.height) {
                                   layout.height = layout.height - (rect.y + rect.height - layout.y);
                                   layout.y = rect.y + rect.height;
                               }
   
                               var absY = (rect.y + rect.height) - layout.y;
   
                               if (absY + Math.abs(layout.height) + 65 > rect.y + rect.height) {
                                   layout.height = -(rect.y + rect.height - 65 - absY);
                               }
   
                               if (layout.height > 0) layout.height = 0;
   
                           }
                       });
                   });
               }
               
   const data = getData();
   chart.setOption({
       xAxis: [
         {
         	splitNumber: 24,
           scale: false,
           min, 
           max,
           type: "time",
           axisLabel: {
             formatter(value) {
               return moment(value).format("HH");
             }
           }
         }
       ],
       yAxis: [
         {
           type: "value"
         }
       ],
       series: [
         {
           data,
           type:'bar',
         }
       ]
     });
   `


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org