错误的 x 轴最小值最大值 Highcharts

Question

我正在创建一个面积图，其中 y 轴值必须在 x 轴的边缘开始和结束。 我参考了以下链接，该链接适用于大于 2 的值。

>2个值的JSFiddle

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

<1 值的JSFiddle

有没有办法解决这种不一致？

 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，默认情况下，只有两个点的最小值设置为 0，最大值设置为 1 - 这就是图表看起来如此的原因。

作为一种解决方法，您可以尝试以下解决方案：

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

此自定义代码查找最高总值并将其设置为轴的最大值：

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