Highcharts多个x轴和Y轴。第一个x轴的宽度与浏览器调整大小不同步

我在第一个x轴上使用宽度时遇到问题。有没有办法用%来定义x轴上的宽度？我尝试使用%的宽度，并使用'useHTML'设置为true，但这不起作用。我尝试了另一种解决方案，在window.resize时设置新的宽度，这也不起作用。请建议此问题的任何解决方法或解决方案

xAxis: [{
                        categories:['No Reason',],
                        tickmarkPlacement: 'on',
                        width:120,
                    },{
                        categories: ['','DPU link','to maintain air','Temp below 39 deg.','keep running',],
                        tickmarkPlacement: 'on',
                        offset: 0,
                        //width: 550,
                        plotBands: [{

                                        label:{
                                            text:"No Reason",
                                            style:{
                                                fontFamily: 'arial',
                                                fontSize: '14px',
                                            },
                                        },
                                        color: '',
                                        color: '#d1deea',
                                        from:-0.5,
                                        to :0.5,

                                },{

                                            label:{
                                                text:"Acceptable",
                                                style:{
                                                    fontFamily: 'arial',
                                                    fontSize: '14px',
                                                },
                                            },
                                            color: '',
                                            from:0.5,
                                            to :3.5,

                                    },
                                    {

                                            label:{
                                                text:"Not Acceptable",
                                                style:{
                                                    fontFamily: 'arial',
                                                    fontSize: '14px',
                                                },
                                            },

                                           color: '#E5E4E2',
                                            from:3.5,
                                            to :4.5 
                                     }],
                }],
                yAxis: [{
                showLastLabel:false,
                showFirstLabel:false,
                gridZIndex: -1,
                title: {
                    text: 'Total Number Of Capture'
                },
                stackLabels: {
                    enabled:true,
                    style: {
                        color: 'contrast',
                        fontFamily: 'arial',
                        fontSize: '14px',
                        fontWeight: 'bold',
                        textShadow: false
                    }
                }
            },{
                showLastLabel:false,
                showFirstLabel:false,
                gridZIndex: -1,
                title: {
                    text: 'Total Number Of Capture'
                },
                style: {
                    color: 'Black',
                    fontFamily: 'arial',
                    fontSize: '14px',
                },
                stackLabels: {
                    enabled: false,
                    style: {
                        color: 'contrast',
                        fontFamily: 'arial',
                        fontSize: '14px',
                        fontWeight: 'bold',
                        textShadow: false
                    }
                },
                opposite:true
            }],

---

下面是完整代码的提琴：

不支持%中xAxis的宽度。您可以通过添加新选项来实现，例如

widthPerc

  //add support for axis' left and width set in percent
  (function(H) {
    H.wrap(H.Axis.prototype, 'setAxisSize', function(proceed) {
      // Run original proceed method
      proceed.apply(this, [].slice.call(arguments, 1));

      var chart = this.chart,
        options = this.options,
        width = options.widthPerc,
        left = options.leftPerc;

      // Check for percentage based input values
      if (width) {
        width = parseFloat(width) / 100 * chart.plotWidth;
        this.width = width;
        options.width = width;
      }
      if (left) {
        left = parseFloat(left) / 100 * chart.plotWidth + chart.plotLeft;
        this.left = left;
        options.left = left;
      }
    });
  }(Highcharts));

例如：

Highcharts使用xAxis的

width

来定位一些SVG元素，因此仅覆盖默认属性需要更多的包装

您的问题的替代解决方案可以是为第一个x轴设置

max

和

endOnTick

，如：

            xAxis: [{
              categories: ['No Reason', ],
              tickmarkPlacement: 'on',
              //width:120,
              max: 4,
              endOnTick: false
            }, {

例如：