Highcharts 中的 y 轴间隙

Question

根据下面的代码，覆盖区域的底部和 x 轴线之间存在区域间隙。

CodePen 与我的代码

var chart = new Highcharts.Chart({
        chart: {
           renderTo: container,
            type: 'area', 
        },
  
        title: {
            text: 'Candidate Skills'
        },
      
        xAxis: {
            offset: 0,
           margin:10,
          padding:10,
           labels: {
                    rotation: -45,
                    align: 'right',      
                },
          tickmarkPlacement: 'on',
           categories: ['2024-01-16','2024-01-17','2024-01-18','2024-01-19','2024-01-20','2024-01-21','2024-01-22','2024-01-23','2024-01-24'],
           minPadding: 0,
      maxPadding: 0,
      tickWidth: 0
        },
        yAxis: {
         lineWidth: 2,
         
        margin:10,
          padding:10,
           min: 0,
        max: 14,
             categories: ['preschool', '1st grade', '2nd grade', '3rd grade','4th grade','5th grade', '6th grade', '7th grade','8th grade','9th grade', '10th grade', 'apprenticeship', 'middle school', 'Studies', 'profession'],
           
            labels: {
                formatter: function () {
                    return this.value;
                },
            
            }
        },
       
        series: [{
            data: [1,10,5,4,8,4,10,13,11],
            pointPlacement: 'on',
           
        }],
       responsive: {
        rules: [{
            condition: {
                maxWidth: 200
            },
            chartOptions: {
                
                yAxis: {
                    labels: {
                        align: 'left',
                        x: 0,
                        y: 0
                    },
                   
                },
                
            }
        }]
    }
    });

Answer 1

该差距是由于您使用类别 y 轴类型而产生的，这是正常行为。您可以通过添加以下插件来消除间隙：

Highcharts.wrap(Highcharts.Axis.prototype, 'setAxisTranslation', function(proceed, saveOld) {
  var categories = this.categories;
  if (this.coll === 'yAxis') {
    this.axisPointRange = 0;
    this.categories = null;
  }
  proceed.call(this, saveOld);
  this.categories = categories;
});

---

现场演示：https://jsfiddle.net/BlackLabel/05rtLpsq/

相关主题：https://github.com/highcharts/highcharts/issues/2792