Почему метка вертикальной оси отображается только после нажатия кнопки?

Question

Я работаю над веб-сайтом, который должен показывать что-то на графике (старшем графике) после нажатия кнопки.

Проблема в том, что при первой загрузке страницы метка на вертикальной оси не видна, независимо от того, насколько большой я установил поле для графика.Однако после первого нажатия кнопки метки видны и остаются таковыми.

Не было такой проблемы до того, как я установил «обратное», «противоположное» для xAxis и «обратное» для yAxis как истинное.

Что вызывает это явление и как я могу его решить?

Подробнее см. 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.Не могли бы вы предоставить нам мини-демо, где проблема возникает?Я спрашиваю, потому что в текущей демонстрации есть много строк, которые не нужны.

Кроме того, пока мы не найдем источник проблемы, вы можете обойти ее, вызвав this.reflow () в обработчике событий chart.events.load.

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

APIСправка: https://api.highcharts.com/class-reference/Highcharts.Chart#reflow

Answer 2

Я не уверен, почему, но он прекрасно работает, когда вы удаляете свойство marginLeft или устанавливаете его в 0.