x轴最小值最大值图表错误

Question

我正在创建一个面积图，其中y轴的值必须在x轴的边缘开始和结束。我指的是以下link，它对大于2的值有效。

JSFiddle表示> 2个值

对于小于2的值，x轴标签消失并且显示一些数字。

JSFiddle表示<1个值

是否有解决此矛盾的方法？

var myChartb_3 = Highcharts.chart('container', {
  chart: {
    type: 'area',
    zoomType: 'xy',
  },
  title: null,
  xAxis: {
    endOnTick: false,
    startOnTick: false,
    min: 0.5,
    max: 0.5,
    categories: ['Nov 18', 'Dec 18'],
    title: {
      enabled: false
    }
  },
  legend: {
    enabled: true,
    align: 'center',
    itemMarginTop: 20,
    itemStyle: {
      fontSize: '14px',
      fontWeight: 'normal',
      color: '#111',
    },
    symbolRadius: 4,
  },
  yAxis: {
    title: {
      enable: false,
    },
    labels: {
      formatter: function() {
        return '$' + this.value
      }
    }
  },
  tooltip: {
    shared: true,
    useHTML: true,
    formatter: function() {
      return this.points.reduce(function(s, point) {
        return s + '<div class="proxima mB5"><span class="dIB mR10" style="background:' + point.series.color + ';width: 16px;height:16px;border-radius:4px; vertical-align: bottom"></span>' + point.series.name + ': <b class="proximas">' + point.series.name + '</b></div>'

      }, '<b class="proxima mB5 dIB">' + this.x + '</b>');
    },
    crosshairs: [{
      snap: false,
      width: 1,
      color: '#979797',
      dashStyle: 'shortdash',
      zIndex: 22
    }]
  },
  plotOptions: {
    area: {
      stacking: 'normal',
      lineWidth: 1,
      marker: {
        enabled: true,
        symbol: 'circle',
        radius: 5,
        lineColor: null,
        states: {
          hover: {
            enabled: true,
            radius: 4
          }
        }
      },
    }
  },
  series: [{
    color: '#F1A047',
    lineColor: '#F1A047',
    marker: {
      fillColor: '#F1A047',
    },
    fillColor: {
      linearGradient: {
        x1: 0,
        x2: 0,
        y1: 0,
        y2: 1
      },
      stops: [
        [0, '#FFEBD6'],
        [1, 'rgba(255,254,254,0.99)']
      ]
    },
    name: 'Sample1',
    data: [10, 20]
  }, {
    color: '#6DA4F5',
    lineColor: '#6DA4F5',
    marker: {
      fillColor: '#6DA4F5',
    },
    fillColor: {
      linearGradient: {
        x1: 0,
        x2: 0,
        y1: 0,
        y2: 1
      },
      stops: [
        [0, '#DCEAFF'],
        [1, 'rgba(255,254,254,0.99)']
      ]
    },
    name: 'Sample2',
    data: [25, 24]
  }, {
    color: '#11B177',
    lineColor: '#11B177',
    marker: {
      fillColor: '#11B177',
    },
    fillColor: {
      linearGradient: {
        x1: 0,
        x2: 0,
        y1: 0,
        y2: 1
      },
      stops: [
        [0, '#E2FFF5'],
        [1, 'rgba(255,254,254,0.99)']
      ]
    },
    name: 'Sample3',
    data: [15, 25]
  }]
});

<div id="container" style="height: 400px;">

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/8.0.4/highcharts.js"></script>

Answer 1

请注意，将xAxis.min和xAxis.max设置为0.5会使您的Axis变宽，默认情况下，仅将两点的min设置为0，将max设置为1，这就是图表的样子。

作为解决方法，您可以尝试此解决方案：

演示：https://jsfiddle.net/BlackLabel/exfuhqg4/

此自定义代码寻找最高的总价值，并将其设置为Axis的最大值：

events: {
  load() {
    let chart = this,
        yAxis = chart.yAxis[0],
        total = 0;
    for (let i in yAxis.stacks['area,,,']) {
      total = Math.max(total, yAxis.stacks['area,,,'][i].total)
    }

    yAxis.update({
      max: total
    })
  }
}

API：https://api.highcharts.com/highcharts/chart.events.load

API：https://api.highcharts.com/class-reference/Highcharts.Axis#update