javascript - 为什么只有单击按钮后才会显示垂直轴的标签？

Question

我正在开发一个网站，该网站需要在单击按钮时在图表( Highcharts )上显示某些内容。

问题是:当页面首次加载时，无论我为图表设置多大的边距，都看不到垂直轴上的标签。但是，第一次单击按钮后，可以看到标签并保持不变。

在我将xAxis的“reversed”、“opposite”和yAxis的“reversed”设置为true之前，没有这样的问题。

是什么原因导致这种现象以及如何解决这个问题？

请参阅JSFiddle详细信息。 (代码中有一些逻辑错误，与我的问题无关。)

我刚刚发现，当我第一次加载 JSFiddle 时，图表的垂直轴会显示标签；但是当我另外单击“运行”时，图表将刷新为没有标签的垂直轴。也许我可以模拟加载 JSFiddle 时发生的某些过程，以确保图表的垂直轴显示标签。但我不知道该怎么做。

浏览器:Google Chrome 版本 69.0.3497.92(官方版本)(64 位)(最新) 我的操作系统:Windows 10

生成图表的代码:

function createColumnHorizChart(argMinY = minYAxis, argMaxY = maxYAxis) {



var chart = new Highcharts.Chart({
    chart: { //not to be changed lightly
      renderTo: 'contr2',
      type: 'bar',
      width: 749,
      marginTop: 5,
      marginLeft: 1,
      marginRight: 90,
      marginBottom: 55
    },
    colors: [
      '#0000ff'
    ],
    title: {
      text: null
    },
    exporting: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    credits: {
      enabled: false
    },
    xAxis: {
      categories: ['smaller than 100', '100 - 110', '110 - 120', '120 - 130', '130 - 140', '140 - 150', 'bigger than 150'],
      gridLineWidth: 1,
      startOnTick: true,
      title: {
        text: 'Money Unit (MU)'
      },
      opposite: true,
      reversed: true
    },
    yAxis: {
      reversed: true,
      min: 0,
      max: 15,
      tickInterval: 5,
      title: {
        text: 'Frequency',
      }
    },
    tooltip: {
      positioner: function(boxWidth, boxHeight, point) {
        return {
          x: point.plotX - 50,
          y: point.plotY - 10
        };
      },
      style: {
        fontSize: "10px",
        fontWeight: "unbold"
      },
      formatter: function() {
        return Math.round(chartData[index - 2] * 100) / 100;
      }
    },
    plotOptions: {
      bar: {
        dataLabels: {
          enabled: false
        }
      },
      series: {
        borderColor: '#FFFFFF',
        animation: false, //disable all the animations,
        pointPadding: 0,
        groupPadding: 0,
        borderWidth: 1,
        shadow: false
      }
    },
    series: [{
      enableMouseTracking: false,
      data: Array(7).fill(0)
    }]
  });

  return chart;
}

Answer 1

所以，只能在Windows平台上重现。您能否向我们提供出现问题的缩小版演示？我问这个问题是因为在当前的演示中，有很多行是不必要的。

此外，在我们找到问题根源之前，您可以通过在 Chart.events.load 事件处理程序中调用 this.reflow() 来解决该问题。

chart: {
  events: {
    load: function() {
      this.reflow()
    }
  }
}

API引用: https://api.highcharts.com/class-reference/Highcharts.Chart#reflow