Удалить разрыв в столбчатой ​​диаграмме Highcharts из нулевого значения из файла JSON в React

Question

Я хотел бы выровнять столбцы по категориям на столбчатой ​​диаграмме Highcharts, чтобы они исправляли нулевые значения.Функция ниже была написана Grzegorz делает именно это.Но когда я пытаюсь добавить функцию в официальную оболочку React, она возвращает «элемент» неопределенный.Как мне адаптировать это к официальной оболочке React.Помните, я хочу игнорировать только пробелы из нулевых значений, а не нулей.Вот коды и коробка моего кода, логика должна быть в компоненте Chart.js. Диаграмма находится в ./components/Chart.js

var justifyColumns = function (chart) {
    var categoriesWidth = chart.plotSizeX / (1 + chart.xAxis[0].max - chart.xAxis[0].min),
        distanceBetweenColumns = 0,
        each = Highcharts.each,
        sum, categories = chart.xAxis[0].categories,
        number;
    for (var i = 0; i < categories.length; i++) {
        sum = 0;
        each(chart.series, function (p, k) {
            if (p.visible) {
                each(p.data, function (ob, j) {
                    if (ob.category == categories[i]) {
                        sum++;
                    }
                });
            }
        });
        distanceBetweenColumns = categoriesWidth / (sum + 1);
        number = 1;
        each(chart.series, function (p, k) {
            if (p.visible) {
                each(p.data, function (ob, j) {
                    if (ob.category == categories[i]) {
                        ob.graphic.element.x.baseVal.value = i * categoriesWidth + distanceBetweenColumns * number - ob.pointWidth / 2;
                        number++;
                    }
                });
            }
        });
    }
};

Answer 1

Предоставленная вами функция не работает со значениями null, которые вы также можете заметить без оболочки реакции: http://jsfiddle.net/BlackLabel/2q18zkcj/

Вам необходимо изменить способ работы функции:

function justifyColumns(chart) {
  var categoriesWidth = chart.plotSizeX / (1 + chart.xAxis[0].max - chart.xAxis[0].min),
    distanceBetweenColumns = 0,
    each = Highcharts.each,
    sum, categories = chart.xAxis[0].categories,
    number;
  for (var i = 0; i < categories.length; i++) {
    sum = 0;
    each(chart.series, function (p, k) {
      if (p.visible) {
        each(p.data, function (ob, j) {
          if (ob.category == categories[i] && ob.y !== null) {
            sum++;
          }
        });
      }
    });
    distanceBetweenColumns = categoriesWidth / (sum + 1);
    number = 1;
    each(chart.series, function (p, k) {
      if (p.visible) {
        each(p.data, function (ob, j) {
          if (ob.category == categories[i] && ob.y !== null) {
            ob.graphic.element.x.baseVal.value = i * categoriesWidth + distanceBetweenColumns * number - ob.pointWidth / 2;
            number++;
          }
        });
      }
    });
  }
};

Живая демоверсия: https://codesandbox.io/s/p5j09zrz8q