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

Question

我在第一个 x 轴上使用宽度时遇到问题。有没有办法用 % 定义 x 轴上的宽度？我尝试在 % 中使用宽度并使用 'useHTML' 为真，但这没有用。我通过在 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
            }],

这里是 fiddle 的完整代码：http://jsfiddle.net/o490zwp2/3/

Answer 1

不支持以 % 表示的 x 轴宽度。您可以 extend Highcharts 通过添加新选项 - 例如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));

示例：http://jsfiddle.net/o5w62uc6/

Highcharts 使用 xAxis 的

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

您的问题的替代解决方案可能是为第一个 x 轴设置 max 和 endOnTick，例如：

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

示例：http://jsfiddle.net/wL1bdftj/

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

Highcharts multiple x axis and yaxis. The width of the 1st x-axis is not in sync with browser resize

width

highcharts